Vue3.5 企业级管理系统实战（二十三）：权限指令 - 详解

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

1 权限指令

在 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.tsimport 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;

2 指令引入

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

//src/main.tsimport { 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");

3 权限指令应用

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

编辑

以上就是权限指令的所有内容。

~完~