业务需求的由来（本文只是说明前端的权限的处理方案）
由于企业级别的后台管理的中后台系统中的用户-角色-权限关系 对于不同的用户分配不同的角色，而角色拥有不同的权限 这就是RBAC，基于角色的权限访问控制。在不同的用户登录系统就会有不同的角色，而我们不同的角色有不同的权限 可能不同角色可操作的按钮就不一样， 由此就产生了权限的业务需
权限说明
我们所说的一二级别的权限就是我们的右侧tab栏也就是路由的权限 该级别的权限我们一般用路由的动态渲染去控制 三级权限就是我们的按钮级别的权限 控制页面中我们的操作按钮的显示与隐藏 从而实现三级权限
实现思路
当我们登录时候我们会获得该用户的所有权限 权限控制一般由前后端共同商议，一般会采取sys:roles:create这样的模式去完成 开发过程中可能有所不同 可根据实际开发进行调整。一二级就不过多赘述了 直接说重点 自定义指令完成三级权限
export const auth: Directive = {
// mounted是指令的一个生命周期
mounted(el, binding) {
// value 获取用户使用自定义指令绑定的内容
// el 获取你自定义指令绑定的DOM
const { value } = binding
// 获取用户所有的权限按钮
let auth = JSON.parse(localStorage.getItem('auth')
// 判断用户使用自定义指令，是否使用正确了
if (value && value instanceof Array && value.length > 0) {
const permissionFunc = value
//判断传递进来的按钮权限，用户是否拥有
//Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
const hasPermission = auth?.some((role: any) => {
return permissionFunc.includes(role)
})
// 当用户没有这个按钮权限时，设置隐藏这个按钮
if (!hasPermission) {
el.style.display = 'none'
console.log('Permission does not exist! v-auth=" [' + value + ']"')
}
} else {
console.log('Incorrect permission usage! Must be v-auth=" [\'xxx:xxx:xxx\']"')
}
}
}
以上就是主要的实现思路 主要就是通过拿到权限 通过我们绑定的权限和我们权限字典里的数据进行比对 存在就代表我们这个按钮是有权限的 反之则没有权限 ，接下来只需要我们注册绑定到全局 我们所有组件中都可以直接使用啦~
main.ts文件
import * as directives from '@/directive'
- [ ]
// 循环注册是定义指令
Object.keys(directives).forEach(key => { // Object.keys() 返回一个数组，值是所有可遍历属性的key名
app.directive(key, (directives as { [key: string]: Directive })[key])
// key是自定义指令名字；后面应该是自定义指令的值，值类型是string
})
<el-button v-auth="['sys:roles:create']" click=" type="primary">新增</el-button>
// 直接使用我们的自定义指令 并绑定该按钮的权限码 就OK啦！
以上就是我在开发过程中的实现自定义指令实现三级按钮级别的权限 的所有 仅作自己学习记录 仅供参考 也欢迎有其它更好的解决方案 相互学习 相互交流
