按钮级权限管理就简单多了, 简单来说就是页面下面的按钮功能, 控制是否显示.
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 )