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

2 指令引入

在 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");

3 权限指令应用

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

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

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

~完~