若依vue3按钮权限解析

用户登录成功后查询用户信息接口：getInfo
普通用户信息：

超级管理员信息：

permissions：按钮权限标识
roles：角色标识
user：用户信息
然后将getInfo的信息存储到Pinia，用于全局获取

/**
 * v-hasPermi 操作权限处理
 * Copyright (c) 2019 ruoyi
 */

import useUserStore from "@/store/modules/user";
// 若依的按钮权限
// 通过自定义指令实现
export default {
  mounted(el, binding, vnode) {
    /*
      v-hasPermi="['project:manager:remove']"
      获取自定义指令的value
      value必须是一个数组，如：['project:manager:remove']
    */
    const { value } = binding;
    const all_permission = "*:*:*"; // 超级管理员权限
    // 获取用户身上的按钮权限
    // 若是超级管理员，permissions为：["*:*:*"]
    // 若是其它角色，permissions为一个存储各种权限标识的数组
    const permissions = useUserStore().permissions;
    
    // 判断自定义指令是否有值，并且值是否是数组
    if (value && value instanceof Array && value.length > 0) {
      // 保存权限标识符
      const permissionFlag = value;
      // 遍历用户身上的权限标识
      const hasPermissions = permissions.some((permission) => {
        // 权限标识是一个数组，通过includes判断权限标识在用户身上是否存在，返回状态
        // 先判断是否是超级管理员，超级管理员的权限为"*:*:*"，是超级管理员直接匹配成功
        // 不是超级管理员则通过用户权限来匹配
        return all_permission === permission || permissionFlag.includes(permission)
      });
      // 若权限不存在
      if (!hasPermissions) {
        // 删除当前绑定的节点
        el.parentNode && el.parentNode.removeChild(el);
      }
    } else {
      // 自定义指令没有绑定标识符或标识符格式错误
      throw new Error(`请设置操作权限标签值`);
    }
  },
};

页面使用自定义指令实现按钮权限

<el-button 
    type="danger" 
    v-hasPermi="['project:manager:remove']"
    @click="handelDel"
    >删除
</el-button>