权限应用 ~ 按钮级控制

目录

权限应用-按钮级控制-分析

分析

思路

权限应用-按钮级控制-自定义指令

回顾下自定义指令

解决按钮级别的权限验证

 权限控制流程重点梳理总结

业务场景

员工得到权限数据

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

---

权限应用-按钮级控制-分析

分析

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

思路

用户登陆成功后,用户可以访问的按钮级别权限保存在points数组中.而这个数据我们是保存在vuex中的,所以,就可以在项目的任意地方来访问

   如果某个按钮上的标识在points出现,则可以显示出来

权限应用-按钮级控制-自定义指令

指令: 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'是从标识符来的

 权限控制流程重点梳理总结

业务场景

公司里有不同的职能部门，都在用同一套系统 ，不一样部门的人员进入系统里面需要操作的事情是不一样的

必定需要根据不同的员工角色配置不同的权限

一种基于角色的设计思想

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

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

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

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

员工得到权限数据

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

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

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

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

                a.添加到路由系统中 （可以根据路径标识渲染组件 addRoutes）

                b.添加到左侧菜单渲染  (vuex管理 + v-for遍历)

      2.按钮权限控制

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