Vue3如何自定义v-permission权限指令

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

// 判断是否有权限
const hasPermission = (value: Array<string>, el: Element) => {
  // 检查是否配置了权限参数
  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('权限数据 "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>