按钮权限实现-自定义指令_前端按钮权限自定义指令设置-优快云博客

自定义指令定义

v-show ：Vue 的内置指令，通过这个指令能展示和隐藏节点（Vue底层控制了该节点的 display 属性）

自定义指令：在构建项目过程中，虽然我们都是使用的组件形式，但是在某些情况下，我们仍然需要对普通DOM元素进行底层操作，这个时候就会用到自定义指令。
自定义指令既可以像 v-show 一样，不搭配属性值，也可以像 v-text配置属性值来实现特殊效果

1. 在自定义指令文件中编写以下代码
```javascript
方法一
//这里由于后台返回的button数组存放在仓库中，所以这里需要引入pinia
import pinia from "@/store";
import userstore from "@/store/modules/user.ts";
let UserStore = userstore(pinia);
export const isHasButton = (app: any) => {
  // 全局自定义指令，实现按钮权限
  app.directive("has", {
    // 代表使用这个全局自定义指令挂载完毕的时候会执行一次
    mounted(el: any, options: any) {
      //自定义指令右侧的数值：如果在用户信息buttons数组当中没有，直接从Dom树上干掉
      if (!UserStore.buttons.includes(options.value)) {
        // dom的原生方法
        el.parentNode.removeChild(el);
      }
    },
  });
};
方法二

//使用useCache钩子获取缓存工具wsCache，用于从缓存中获取，也可不存在缓存中，像方法一一样直接读取
const { wsCache } = useCache()

/**
 * 在当前应用中注册一个自定义指令`hasPermi`，用于检查元素的权限
 * 此函数的目的是通过自定义指令来管理页面元素的显示和隐藏，根据用户权限动态更新DOM
 * 
 * @param app 应用实例，允许对应用的各个方面进行访问和操作
 */
export function hasPermi(app: App<Element>) {
  // 注册自定义指令`hasPermi`
  app.directive('hasPermi',{
    // 在被绑定元素插入到 DOM 后调用
    mounted(el, binding) {
      checkPermission(el, binding)
    },
    // 在绑定元素所在的模板更新后调用
    updated(el, binding) {
      checkPermission(el, binding)
    }
  })
}
/**
 * 检查元素是否具有指定权限
 * 此函数用于动态显示或隐藏具有指定权限的DOM元素
 * @param {Element} el - 需要进行权限检查的DOM元素
 * @param {Object} binding - 包含权限值的v-bind对象
 */
const checkPermission = (el, binding) => {
  // 获取绑定的权限值
  const { value } = binding
  // 定义全权限标识
  const all_permission = '*:*:*'
  // 从缓存中获取用户信息
  const userInfo = wsCache.get(CACHE_KEY.USER)
  // 提取用户的权限列表
  const permissions = userInfo?.permissions || []
  
  // 检查绑定的权限值是否为非空数组
  if (value && value instanceof Array && value.length > 0) {
    const permissionFlag = value

    // 检查是否具有任何匹配的权限
    const hasPermissions = permissions.some((permission: string) => {
      return all_permission === permission || permissionFlag.includes(permission)
    })
    
    // 如果没有匹配的权限，则隐藏元素
    if (!hasPermissions) {
      el.style.display = 'none'
    } else {
      el.style.display = ''
    }
  } else {
    // 如果权限值不符合预期格式，抛出错误
    throw new Error(t('permission.hasPermission'))
  }
}

首先在main.js中引用并使用所存放自定义指令的文件

/ 引入自定义指令
import { isHasButton } from "@/directive/has";
isHasButton(app);

最后在需要使用按钮权限的地方直接使用即可

//btn.Role.add 这是后台返回的按钮名称，由于在main.js中已经全局注册isHasButton ，所以可以直接使用
  <el-button
        type="primary"
        size="default"
        icon="Plus"
        @click="AddroleBtn"
        v-has="`btn.Role.add`"
        >添加角色</el-button
      >