vue使用自定义指令实现按钮权限控制

1、src下新建目录directive

2、新建permission.js文件，编写自定义指令方法 src/directive/permission.js

const permission = {
    // 全局注册自定义指令
    install (Vue) {
        // 使用 inserted 函数，在被绑定元素插入父节点时检测该元素是否有权限
        Vue.directive('permission', {
            inserted(el, binding, vnode) {
                /*el: 指令所绑定的元素，可以用来直接操作DOM。
                   binding: 一个对象，包含指令的很多信息。
                   vnode: Vue编译生成的虚拟节点。*/
                const { value } = binding
                // 自定义指令的执行函数，，取到登录缓存的按钮权限数组，赋值给全局对象userMsg
                global.ButtonPermissions = JSON.parse(sessionStorage.getItem('ButtonPermissions'))
                if (global.ButtonPermissions && global.ButtonPermissions.indexOf(value) < 0) {
                    el.style.display = 'none'
                }
            }
        })
    }
}
export default permission

3、main.js里引入并全局注册

import Permission from '@/directive/permission'
Vue.use(Permission)

4、登录成功后存储有权限的button列表，并存储在sessionStorage中

reqGetMyMenu().then(res => {
    const datas = res.data.result;
    // 调用 tree 来解析后端返回来的树
    let arr = []
    datas.forEach(item => {
        // 存储按钮权限
        if (item.buttonList?.length > 0) {
           arr.push(item.permissionAlias)
        }
    })
    global.ButtonPermissions = arr;
    // 将获取的按钮权限数组放入sessionStorage缓存中
    sessionStorage.setItem("ButtonPermissions",JSON.stringify(global.ButtonPermissions));

5、退出登陆时清空有权限的按钮 window.sessionStorage.clear()

6、使用(必须和后端返回的按钮权限对应上)

<a-button type="primary" icon="plus" v-permission="'user:create'">
 添加用户
</a-button>