按钮级别鉴权

在vue3 + vite 中实现vue指令 按钮级别鉴权. 前提： 使用角色鉴权、 假设将role保存在了localstorage中

思路

 在main.js中注册全局指令
 通过 binding.value 获取按钮的权限角色
 判断 当前登录的校色是否是按钮权限角色中的一员

实现代码

// 自定义按钮级别鉴权
app.directive('auth', {
    mounted(el, binding){
        console.log(binding.value);
        if (binding.value.includes(localStorage.getItem('role'))){
            return true
        }else {
            el.style.display = 'none'
        }
    }
})

vue模板中使用

<el-button type="primary" v-auth="['admin','TTking']">测试鉴权按钮</el-button>

效果

当role为admin时按钮显示

当不是权限角色时按钮隐藏