在实际应用场景中，常常需要依据用户角色对按钮的操作权限实施控制。实现这一控制主要有两种方式：一种是借助前端指令基于角色进行权限管控，另一种是通过后台返回对应的权限属性来实现精细化控制。本文聚焦于前端权限指令展开探讨。

权限指令

在 src/directives/permission.ts 中实现权限指令，代码如下：

//src/directives/permission.ts 
import { useUserStore } from "@/stores/user";
import type { DirectiveBinding } from "vue";
/**
 * 检查元素权限：根据用户角色判断是否有权限显示元素
 * @param el - 当前指令绑定的DOM元素
 * @param bindings - 指令绑定的值和参数
 */
function checkPermission(el: HTMLElement, bindings: DirectiveBinding) {
  // 获取指令绑定的值（权限数组）
  const { value } = bindings;
  // 获取用户状态管理仓库
  const store = useUserStore();
  // 计算属性：获取用户拥有的角色名称数组
  const roles = computed(() => store.state.roles.map((role) => role.name));
  // 校验权限配置格式
  if (value && Array.isArray(value)) {
    // 判断用户是否拥有任一所需角色
    const hasPermission = roles.value.some((item) => value.includes(item));
    // 无权限则移除DOM元素
    if (!hasPermission) {
      el.parentNode?.removeChild(el);
    }
  } else {
    // 抛出异常提示正确用法
    throw new Error(`请提供权限，如：v-permission="['admin','editor']"`);
  }
}
/**
 * 权限指令：Vue3自定义指令，用于元素级权限控制
 * 使用方式：v-permission="['admin','editor']"
 */
const permission = (el: HTMLElement, bindings: DirectiveBinding) => {
  // 元素插入DOM时执行权限检查
  checkPermission(el, bindings);
};
export default permission;

在 src/directives/index.ts 中引入 permission.ts（如果有其他全局指令也在该文件中引入），代码如下：

//src/directives/index.ts
import type { App } from "vue";
import permision from "./permission"; // 导入权限判断核心逻辑
/**
 * 权限指令插件：用于在Vue应用中注册自定义权限指令
 * 使用方式：在main.js中通过app.use()安装
 */
const install = (app: App) => {
  // 注册全局自定义指令v-permission
  // 指令名称：permission
  // 指令实现：permision函数（来自permission模块）
  app.directive("permission", permision);
};
export default install;

指令引入

在 src/main.ts 中引入directive，代码如下：

//src/main.ts
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import "normalize.css/normalize.css";
import { createPinia } from "pinia";
import element from "./plugins/element";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
import "./permission";
import directives from "./directives/index";
// import ElementPlus from "element-plus";
// import "element-plus/dist/index.css";
import "@/style/index.scss";
import "uno.css";
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate); // 安装持久化插件
app.use(router);
app.use(pinia);
app.use(element);
// app.use(ElementPlus);
app.use(directives);
app.mount("#app");

在需要进行权限控制的组件上使用 v-permission 指令，并传入所需角色数组，例如：v-permission="['admin','editor']"。系统会自动检查用户角色，仅当用户拥有 admin 或 editor 角色时显示该组件，其他用户将无法看到或操作此元素。示例代码如下：

<el-button
  v-permission="['admin','editor']"
  type="primary"
  @click="handleEdit">
  编辑
</el-button>

【代码】https://gitee.com/lara0101/vue3-admion-lara.git （如有报错请根据提示自行调试，没有时间详细回复，谢谢）