//@ts-nocheck
import { Directive } from "vue";
import { permission } from "@/directives/permission.ts";

const allGlobalDirectives = { permission };
// console.log(allGlobalDirectives, "allGlobalDirectives"); //打印發(fā)現(xiàn)是導(dǎo)出的自定義指令名，permission
export default {
  install(app) {
    Object.keys(allGlobalDirectives).forEach(key => {  //Object.keys() 返回一個(gè)數(shù)組，值是所有可遍歷屬性的key名
      app.directive(key, (allGlobalDirectives as { [key: string]: Directive })[key]);  //key是自定義指令名字；后面應(yīng)該是自定義指令的值，值類型是string
    });
  }
};

import type { DirectiveBinding } from 'vue'

export const permission = (el: HTMLElement, binding: DirectiveBinding) => {
  // value 獲取用戶使用自定義指令綁定的內(nèi)容
  const {value} = binding;
  // 獲取用戶所有的權(quán)限按鈕
  // const permissionBtn = sessionStorage.getItem("permission");
  const permissionBtn = ["user.add23"];
  // 判斷用戶使用自定義指令，是否使用正確了
  if (value && value instanceof Array && value.length > 0) {
    const permissionFunc = value;
    //判斷傳遞進(jìn)來(lái)的按鈕權(quán)限，用戶是否擁有
    //Array.some(), 數(shù)組中有一個(gè)結(jié)果是true返回true，剩下的元素不會(huì)再檢測(cè)
    const hasPermission = permissionBtn.some((role: any) => {
      return permissionFunc.includes(role);
    });
    console.log("hasPermission", value, hasPermission);
    // 當(dāng)用戶沒有這個(gè)按鈕權(quán)限時(shí)，設(shè)置隱藏這個(gè)按鈕
    if (!hasPermission) {
      el.style.display = "none";
    }
  } else {
    throw new Error("need roles! Like v-permission=\"['admin','editor']\"");
  }
};

// 引入自定義插件對(duì)象：注冊(cè)全局組件
import globalDirectives from "@/directives/index.ts";

const app = createApp(App);


// 安裝自定義指令
app.use(globalDirectives);
app.mount("#app");

<span v-permission="['user.add']" class="padding-right-20">測(cè)試</span>