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是自定義指令名字；後面應該是自定義指令的值
})