用途
- 权限控制：根据用户的权限动态显示或隐藏按钮、菜单、表格列等元素。
- 提升代码复用性：将权限控制逻辑封装在指令中，避免在组件中重复编写权限校验代码。
- 增强代码可维护性：集中管理权限逻辑，便于后续修改和维护。
实现原理
- 指令生命周期：利用 Vue 的指令生命周期钩子（如
mounted、updated），在元素挂载或更新时检查权限。 - 权限校验：通过校验用户权限列表与指令绑定值（所需权限）是否匹配，来决定元素的显示状态。
- 隐藏或禁用元素：如果用户没有权限，可以选择隐藏元素（
display: none），或者禁用元素（如按钮变灰）。
示例代码
以下是一个典型的 v-permission 指令实现
app.directive('permission', {
mounted(el, binding) {
const requiredPermission = binding.value; // 指令绑定的值，如 'admin'
const userPermissions = ['admin', 'editor']; // 假设这是用户权限列表
if (!userPermissions.includes(requiredPermission)) {
el.style.display = 'none'; // 如果用户没有权限，隐藏元素
}
},
updated(el, binding) {
const requiredPermission = binding.value;
const userPermissions = ['admin', 'editor'];
if (binding.value !== binding.oldValue) { // 如果权限值发生变化
if (!userPermissions.includes(requiredPermission)) {
el.style.display = 'none';
} else {
el.style.display = ''; // 如果用户有权限，恢复显示
}
}
}
});
使用方法
在模板中使用 v-permission 指令
<template>
<button v-permission="'admin'">管理员操作</button>
<button v-permission="'editor'">编辑操作</button>
</template>
高级用法
支持禁用模式：通过指令参数（如 :disable）支持禁用元素而非隐藏
<button v-permission:disable="'super-admin'">超级管理员操作</button>
支持强制显示：通过修饰符（如 .force）强制显示元素，即使用户没有权限
<button v-permission.force="'admin'">强制显示按钮</button>
