vue3+ts实现全局注册自定义指定v-permission

// directives/permission/index.ts

import { Directive, DirectiveBinding } from 'vue'
// 判断按钮权限逻辑
const checkPermission = (el: any, binding: DirectiveBinding) => {

  // 获取自定义指令传过来的数组（binding.value）
  const { value } = binding;
  // 取一下本地存的账号权限
  let allPermissions = ['super','admin'];
  
  // 判断自定义指令的传值，在账号权限数组中能否找到 
  if (value && value instanceof Array) {
    
    if (value.length > 0) {
      // 能找到返回true
      const hasPermission = allPermissions.some(role => {
        return value.includes(role)
      })
      // 找不到返回false，使用自定义指令的钩子函数，操作dom元素删除该节点
      if (!hasPermission) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    }
    else {
      throw new Error(`传入关于权限的数组，如 v-permission="['super','normal']"`)
    }
  }
}
// 导出一个对象用作自定义指令的第二个参数
const directive: Directive = {
  mounted(el: any, binding: DirectiveBinding) {
    // debugger
    checkPermission(el, binding)
  },
  updated(el: any, binding: DirectiveBinding) {
    checkPermission(el, binding)
  }
}
export default directive 
           

//directives/index.js

import Permission from './permission';
export {
    Permission
}
           

//main.ts

import * as directives from '@/directives'
const app = createApp(App)
//批量注册指令(现在就一个permission)
Object.keys(directives).forEach(key => { 
   //Object.keys() 返回一个数组，值是所有可遍历属性的key名
  app.directive(key, (directives as { [key: string ]: Directive })[key])  //key是自定义指令名字；后面应该是自定义指令的值
})