什么是 RBAC 权限管理 ? vue.js

1.使用场景: 为了达成不同的帐号登陆系统后能看到不同的页面，能执行不同的功能的目标，我们有很多种解决方案，RBAC(Role-Based Access control)权限模型，也就是基于角色的权限分配解决方案。
图示简单理解：

文章图片

2. 三个关键点: 用户：就是使用系统的人（员工）
权限点：这个系统中有多少个功能（例如：有3个页面，每个页面上有不同的按钮操作）
角色：不同的权限点的集合

文章图片

一种基于角色的设计思想

给员工配置角色（一个员工可以拥有多个角色）
给角色配置权限点（一个角色可以有多个权限点）

员工只要有了角色之后，就自动拥有了角色绑定的所有权限点
3. 根据权限设计思想对应业务模块

员工管理
角色管理
权限点管理（它是没有调整的余地的：它会严格与当前系统的功能对应！）

员工得到权限数据
? 员工信息接口中有当前员工的所有权限数据

userInfo:{ roles: { menus: [],// 菜单权限数据 points: [] // 按钮权限数据 } }

使用权限数据做具体的权限处理
1.菜单权限控制
登录 > 菜单权限数据 > 和本地的所有的动态路由数据做匹配出具 > 得到根据权限筛选之后的动态路由数据

添加到路由系统中（可以根据路径标识渲染组件 addRoutes）
添加到左侧菜单渲染（vuex管理 + v-for遍历）

【什么是 RBAC 权限管理 ?】按钮权限控制
登录 > 按钮权限数据 > 使用按钮单独的权限标识去权限数据里面查找

4.自定义指令指令： v-for, v-if....
自定义指令：自己定义的指令，因为本身指令不够用，所以我们需要自已去定义。
用它来做按钮级别权限控制
复习一下自定义指令
注册格式

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时inserted会自动执行 inserted: function(el, binding) { // v-focus="'abc'"===> binding.value = 'https://www.it610.com/article/abc' console.log('focus.... binding', binding.value) // 聚焦元素 el.focus() } })

使用格式

解决按钮级别的权限验证
在main.js中,定义全局指令

// 注册一个全局自定义指令 `v-allow` Vue.directive('allow', { inserted: function(el, binding) { // 从vuex中取出points, const points = store.state.user.userInfo.roles.points // 如果points有binding.value则显示 if (points.includes(binding.value)) { // console.log('判断这个元素是否会显示', el, binding.value) } else { el.parentNode.removeChild(el) // el.style.display = 'none' } } })

使用