RBAC权限设计(页面权限与按钮权限)_岗位按钮权限设计

页面级别权限思路

不同的人登录看到的是不同的页面

按钮级别的权限

员工A和员工B都可以访问同一个页面（以员工管理为例），但是员工A可以导出excel，员工B就不可以导出excel(看不到按钮)

使用自定义指令

新封装一个自定义指令组件并全局注册

// 注册一个全局自定义组件
import store from '@/store'
export default {
  install(Vue) {
    Vue.directive('allow', {
      // 当被绑定的元素插入到 DOM 中时inserted会自动执行
      inserted: function(el, binding) {
        if (!store.state.user.userInfo.roles.points.includes(binding.value)) {
          // 如果当前员工没有这个按钮权限就移除这个按钮
          el.remove()
        }
      }
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

main.js中全局注册

import directive from './directive'
Vue.use(directive)
1
2

在组件中使用自定义指令

<el-button v-allow="'import_excel'" type="warning" size="small" @click="$router.push('/import')">导入excel</el-button>
<el-button v-allow="'export_excel'" type="danger" size="small" @click="hExport()">导出excel</el-button>
1
2

在权限管理添加的权限标识要和v-allow中的一致