看不懂你来锤我_vue RBAC权限管理_按钮级权限管理_自定义指令_设置流程

按钮级权限管理就简单多了, 简单来说就是页面下面的按钮功能, 控制是否显示.

1. 比如我给一个账号设置了员工角色, 员工这个角色我又设置了以下权限, 可以看到没有二级按钮级权限

2. 然后我登陆这个账户, 后端返回的roles/points就为一个空数组

points 返回的数组为员工 角色的按钮权限, 这个值要和后端约定为按钮权限信息的哪个值, 比如我这里约定为权限标识 而不是权限名称.

3. 然后利用全局自定义指令控制, 这里的useInfo我已经在路由守卫提交vuex后, vuex actions通过mutation更新state的userInfo  所以可以跨组件访问. 

Vue.directive('buttonPerm', {
      inserted(el, binding) {
        console.log(store.state.user.userInfo.roles.points)
        console.log(el, binding, 9999)
        const points = store.state.user.userInfo.roles.points
        points.includes(binding.value) ? true : el.parentNode.removeChild(el)
      }
})

 4. 然后给需要控制的功能点加上v-buttonPerm=" '  export-excel ' "   

export-excel不是随意设置的 需要设置为和后端约定好的权限字段

export-excel 会被传入inserted钩子的binding.value属性中

然后我们就判断points是否includes binding.value => 不存在就通过inserted钩子的el.parentNode.removeChild(el) 干掉这个按钮自己, 达到控制显示的目的

再测试下: 我给这个账户加上这个权限

再次登录, 可以看到已经显示

 总结

设置好权限点信息, 后端会返回每个员工的角色权限数组, 权限数组里面有按钮级权限数组, 利用这个数组里面的名称, 我们可以利用自定义指令, 给需要权限管理的按钮添加

v-自定义指令名=" ' 按钮级权限标识 ' "

自定义指令会在组件渲染时会执行一次, 返回到自定义指令的binding.value, 再通过vuex获取按钮权限数组points, 通过判断, 进行该按钮的显示或销毁=> el.parentNode.removeChild( el )