关于vue3 按钮权限的控制，使用自定义指令来实现

需求

根据不同的权限展示或者隐藏按钮

实现

使用自定义指令来控制按钮，当有权限时就显示，没有就移除元素

代码

src/directives/components/button-permission.ts
components文件下可以创建多个自定义指令，根据直接需求来创建使用

登录成功时获取后端返回的权限标识，保存到内存中或者状态管理器中 vuex | pinia

const directives = {// el 指定绑定元素的dom binding.value传递给指令的值mounted(el:HTMLElement, binding: { value: any }) {// value 获取用户使用自定义指令绑定的内容const { value } = binding// 从登录的时候获取到的该用户的permission 是个数组const permissionArray = JSON.parse(localStorage.getItem('permissions')!)if(permissionArray[0] === '*:*:*') return// 超级管理员// 判断用户使用自定义指令，是否使用正确了if (value) {const permissionFlag = value//判断传递进来的按钮权限，用户是否拥有//Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测const hasPermission = permissionArray.some((role: any) => {return permissionFlag === role})// console.log(hasPermission)// 当用户没有这个按钮权限时，隐藏这个按钮if (!hasPermission) {el.parentNode && el.parentNode.removeChild(el);}} else {// el.style.display = 'none'// console.log('没有权限')}}
}
export default {name: "permission",directives
}

src/directives/index.ts

import type { App } from 'vue'
import buttonPermission from './components/button-permission'
export default function installDirective(app: App) {app.directive(buttonPermission.name, buttonPermission.directives)
}

main.ts

// 自定义指令的全局注册
import directives from '@/directives'
// 自定义指令的全局注册
app.use(directives)

最后给你想要控制按钮的那个元素标签上加上v-permission 值是后端给定的权限标识 类似 xxx:xxx:xxx

<div class="item bluecolor" v-permission="xxx:xxx:xxx">确定</div>