❤ 权限操作指令（v-hasPermi）

接下来我们看看常见的权限操作指令v-hasPermi如何写

权限控制

1、常见的权限控制分类

常见的权限控制大概分为以下两种：

● 基于 ACL 的权限控制 ● 基于 RBAC 的权限控制

👉ACL

是用户 -> 权限，直接为每个用户分配权限

👉RBAC （Role-Based Access Control）模型

是用户 -> 角色 -> 权限，以角色为媒介，来为每个用户分配权限

这里我们采用的也是 RBAC 的方式，也就是通过用户角色来控制用户的权限

2、按钮权限

🔺权限机制

正常我们的权限机制是这样子的：

后台给我们返回用户权限信息permissions 前端根据返回的权限信息来判断是否有权限展示按钮 按照权限生成按钮

👉命令方式

'system:user:add' 系统=> 模块 => 功能

👉使用方式

// 后台给我们返回的
permissions: ["system:user:resetPwd"]; // 权限列表

// 前端按钮权限
<el-button v-hasPermi="['system:user:add']">新增</el-button>

3、按钮权限搭建

接下来我们新建一个directive文件夹,在index.js文件之中先简单实现一下我们的权限指令

// directives/index.js
export default {
  mounted(el, binding) {
    const { value } = binding
    const all_permission = ['*']
    const permissions = ['system:user:add'] //权限列表

    // 如果 value 是数组且长度大于 0
    if (value && Array.isArray(value) && value.length > 0) {
      const permissionFlag = value

      // 检查用户是否具有指定的权限
      const hasPermission = all_permission.some(permission => permissionFlag.includes(permission)) ||
        permissions.some(permission => permissionFlag.includes(permission))

      // 如果没有权限，移除元素
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error('need roles! Like v-hasPermi="[`system:user:add`]"')
    }
  }
}

这里我们简单看一下上面代码在这个过程之中做了哪些事情：

从元素挂载开始，在mounted生命周期钩子中(el:被绑定的 DOM 元素,binding:包含指令相关信息的对象,后面我们拿的value值，也就是['system:user:add']这个值)

判断['system:user:add']是否为我们想要的有效数组

判断用户是否具有指定的权限

没有权限的时候=>el.parentNode拿到父元素节点=>el.parentNode.removeChild(el)移除元素

👉权限指令

// main.js
import hasPermi from '@/directive/hasPermi'

app.directive('hasPermi',hasPermi);

👉使用

<template>
  <el-button v-hasPermi="['system:user:add']">新增</el-button>
</template>

👉验证权限

接下来验证一下刚刚我们写好的权限按钮,权限和按钮匹配就显示,不匹配就隐藏

const permissions = ['system:user:add'] // 显示按钮
const permissions = ['system:user:adds'] // 不显示按钮

证明我们的权限按钮没问题

👉动态权限

👉store动态权限

// store/getters.js
const getters = {
  permissions: state => state.user.permissions
}
export default getters

👉使用动态权限

import store from '@/store'
const permissions = store.getters && store.getters.permissions

👉 增加最高权限

当权限为*的时候，我们就可以显示所有的按钮

const hasPermi = {
  mounted(el, binding) {
    const { value } = binding
    const all_permission = ['*']; // 最高权限，表示所有权限
    const permissions = ['*'];    // 用户拥有的权限列表，可以动态设置

    // 检查是否有最高权限
    const hasHighestPermission = permissions.includes('*'); // 或者你可以检查是否有 'admin' 等权限

    if (hasHighestPermission) {
      // 如果用户有最高权限，则显示所有按钮
      return;
    }

    if (value && Array.isArray(value) && value.length > 0) {
      // 如果 value 是数组且长度大于 0
      const permissionFlag = value;

      // 检查用户是否具有指定的权限
      const hasPermission = all_permission.some(permission => permissionFlag.includes(permission)) ||
        permissions.some(permission => permissionFlag.includes(permission));

      // 如果没有权限，移除元素
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      throw new Error('need roles! Like v-hasPermi="[`system:user:add`]"');
    }
  }
};

export default hasPermi;

增加最高权限后，管理员下所有按钮就可以都显示了