新建src/directives，然后在该目录下创建一个文件，比如 permission.js：

1. 定义鉴权逻辑

首先有一个鉴权函数，用于检查用户是否拥有特定权限：

// 权限检查函数
function checkPermission(permission) {
  const userPermissions = ['view', 'edit']; // 假设这是当前用户的权限列表
  return userPermissions.includes(permission);
}

2. 创建自定义指令

接下来，创建一个自定义指令 v-permission，用于控制元素的显示或隐藏：

import Vue from 'vue';

// 注册全局自定义指令
Vue.directive('permission', {
  inserted(el, binding) {
    const { value } = binding; // 获取指令的值（例如权限名称）
    if (value && !checkPermission(value)) {
      // 如果没有权限，则移除元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  },
});

---

3. 在组件中使用自定义指令

在模板中使用 v-permission 指令来控制元素的显示：

<template>
  <div>
    <button v-permission="'view'">查看</button>
    <button v-permission="'edit'">编辑</button>
    <button v-permission="'delete'">删除</button>
  </div>
</template>

4. 在 main.js 中引入并注册

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import './directives/permission'; // 引入自定义指令

new Vue({
  render: h => h(App),
}).$mount('#app');