什么是 RBAC 权限管理 ?

---

1.使用场景:

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

图示简单理解：

2. 三个关键点:

用户： 就是使用系统的人（员工）

权限点：这个系统中有多少个功能（例如：有3个页面，每个页面上有不同的按钮操作）

角色：不同的权限点的集合

一种基于角色的设计思想

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

员工只要有了角色之后，就自动拥有了角色绑定的所有权限点

3. 根据权限设计思想对应业务模块

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

员工得到权限数据

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

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

使用权限数据做具体的权限处理

1.菜单权限控制

登录 > 菜单权限数据 > 和本地的所有的动态路由数据做匹配出具 > 得到根据权限筛选之后的动态路由数据

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

2. 按钮权限控制

   登录 > 按钮权限数据 > 使用按钮单独的权限标识 去权限数据里面查找

4.自定义指令

指令： v-for, v-if....

自定义指令：自己定义的指令，因为本身指令不够用，所以我们需要自已去定义。

用它来做按钮级别权限控制

复习一下自定义指令

注册格式

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

使用格式

<input v-foucs="'xxxx'" />

解决按钮级别的权限验证

在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'
    }
  }
})

使用

<el-button
+           v-allow="'import_employee'"
            type="warning"
            size="small"
            @click="$router.push('/import')"
          >导入excel</el-button>

这里的：'import_employee'是从标识符来的