import { App, DirectiveBinding } from 'vue';
import store from '@/store';

// 判斷是否有權限
const hasPermission = (value: Array<string>, el: Element) => {
  // 檢查是否配置了權限參數(shù)
  if (!Array.isArray(value) || value.length === 0) {
    throw new Error(`v-permission 需要配置權限，例如 v-permission="['xxx']"`);
  }

  // 獲取用戶權限
  const ruleNames: Array<string> = store.getters['menu/getRuleNames'] || [];
  if (!Array.isArray(ruleNames)) {
    console.warn('權限數(shù)據(jù) "menu/getRuleNames" 格式不正確，請檢查 store 配置。');
    return;
  }

  // 判斷是否有權限
  const hasAuth = value.some((val) => ruleNames.includes(val));
  if (!hasAuth && el.parentNode) {
    el.parentNode.removeChild(el); // 移除元素
  }
  return hasAuth;
};

export default {
  install(app: App) {
    app.directive('permission', {
      mounted(el: Element, binding: DirectiveBinding) {
        hasPermission(binding.value, el);
      },
      updated(el: Element, binding: DirectiveBinding) {
        hasPermission(binding.value, el);
      },
    });
  },
};

import { createApp } from 'vue';
import App from './App.vue';
import store from '@/store';
import permission from '@/directives/permission';

const app = createApp(App);
app.use(store);
app.use(permission); // 注冊自定義指令
app.mount('#app');

<template>
  <div>
    <!-- 用戶擁有 'OrderList'權限時顯示 -->
    <button v-permission="['OrderList']">有權限的按鈕</button>

    <!-- 僅管理員權限時顯示 -->
    <div v-permission="['admin']">僅管理員可見內容</div>
  </div>
</template>