前端角色权限处理

一般业务逻辑是，后端通过登录用户，返回对应的角色或者权限

前端根据后端返回的东西再做权限处理

常规有以下几种处理方式

1. 验证用户是否具备某权限

2. 验证用户是否含有指定权限，只需包含其中一个

3. 验证用户是否含有指定权限，必须全部拥有

4. 验证用户是否具备某角色

5. 验证用户是否含有指定角色，只需包含其中一个

6. 验证用户是否含有指定角色，必须全部拥有

参考以下的若依代码

function authPermission(permission) {
  const all_permission = "*:*:*";
  const permissions = [后端返回的权限列表]
  if (permission && permission.length > 0) {
    return permissions.some(v => {
      return all_permission === v || v === permission
    })
  } else {
    return false
  }
}

function authRole(role) {
  const super_admin = "admin";
  const roles = [后端返回的角色列表]
  if (role && role.length > 0) {
    return roles.some(v => {
      return super_admin === v || v === role
    })
  } else {
    return false
  }
}

export default {
  // 验证用户是否具备某权限
  hasPermi(permission) {
    return authPermission(permission);
  },
  // 验证用户是否含有指定权限，只需包含其中一个
  hasPermiOr(permissions) {
    return permissions.some(item => {
      return authPermission(item)
    })
  },
  // 验证用户是否含有指定权限，必须全部拥有
  hasPermiAnd(permissions) {
    return permissions.every(item => {
      return authPermission(item)
    })
  },
  // 验证用户是否具备某角色
  hasRole(role) {
    return authRole(role);
  },
  // 验证用户是否含有指定角色，只需包含其中一个
  hasRoleOr(roles) {
    return roles.some(item => {
      return authRole(item)
    })
  },
  // 验证用户是否含有指定角色，必须全部拥有
  hasRoleAnd(roles) {
    return roles.every(item => {
      return authRole(item)
    })
  }
}

其实本质上都是判断数组内是否存在某个角色或者某个权限，存在返回true，否则返回false

以上方法常用于函数处理中，而一般处理权限按钮，可以封装一个自定义指令，参考以下的若依代码

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = [后端返回的用户角色/权限]

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}