vue后台用户路由权限和按钮权限实现原理

概论

• 主要是通过一个唯一标识name或者id来过滤判断用户所处的角色是否有路由的权限或者按钮的权限
• 一般路由都有一个一个name可以作为唯一标识
• 一般按钮的话，可以自定义一个name作为标识

业务逻辑

后台通过选中路由或者按钮给角色，代表这个角色有数组中name[]的权限，用户或者部门再绑定角色，实现权限的管理

路由过滤方式

通过路由守卫事件过滤权限路由，核心之处就是唯一标识name过滤
如下示例代码：

按钮权限实现方式：通过自定义指令过滤按钮是否显示来实现按钮权限

示例代码：

// permission.ts
// 引入vue中定义的指令对应的类型定义
import { Directive } from 'vue'
export const permission: Directive = {
  // mounted是指令的一个生命周期
  mounted(el, binding) {
    // value 获取用户使用自定义指令绑定的内容
    const { value } = binding
    // 获取用户所有的权限按钮
    const permissionBtn = wsCache.get('permission')
    // 判断用户使用自定义指令，是否使用正确了
    if (value && value instanceof Array && value.length > 0) {
      const permissionFunc = value
      //判断传递进来的按钮权限，用户是否拥有
      //Array.some(), 数组中有一个结果是true返回true，剩下的元素不会再检测
      const hasPermission = permissionBtn.some((btnName: any) => {
        return permissionFunc.includes(btnName)
      }) 
       // 当用户没有这个按钮权限时，设置隐藏/移除这个按钮
      if (!hasPermission) {
        el.style.display = 'none'
        // el.parentNode.removeChild(el);
      }
    } else {
      throw new Error('need roles! Like v-permission="[\'admin\',\'editor\']"')
    }
  }
}

上面代码的核心就是：

const hasPermission = permissionBtn.some((btnName: any) => {
        return permissionFunc.includes(btnName)
      })

有权限则自定义指令让这个按钮显示，没权限则不让显示

总结

权限管理的核心就是通过一个类似allowRoutes:name:string[] 和 一个allowBtns：name:string[] 绑定给角色，通过允许的name去过滤路由或者按钮