Vue自定义指令v-permit通过bind/update钩子结合权限校验，实现元素隐藏、禁用及提示；支持数组权限、动态响应式更新，并在模板中简洁使用。
Vue 自定义指令是封装 DOM 操作逻辑的轻量方式，特别适合权限控制这类“有权限才显示/可点击”的场景。核心思路是：在指令钩子中读取用户权限，结合 v-node 或 el 控制元素的可见性、禁用状态或直接移除。
一、基础结构：定义一个权限指令 v-permit
在项目入口（如 main.js）或单独的指令文件中注册：
// directives/permit.js
export default {
// 指令绑定到元素时触发（初始渲染）
bind(el, binding, vnode) {
const { value } = binding;
const hasPermission = checkAuth(value); // 自定义权限校验函数
if (!hasPermission) {
el.style.display = 'none'; // 隐藏按钮
// 或 el.remove(); // 彻底移除（更彻底但需注意响应式更新）
}
},
// 指令所在组件更新时触发（如权限动态变化）
update(el, binding) {
const { value } = binding;
const hasPermission = checkAuth(value);
if (!hasPermission) {
el.style.display = 'none';
} else {
el.style.display = '';
}
}
}
其中 checkAuth 是你自己的权限判断逻辑，比如对比用户角色数组或后端返回的权限码列表：
-
checkAuth('user:delete')→ 判断当前用户是否含该权限字符串 -
checkAuth(['post:create', 'post:edit'])→ 支持传数组，表示“至少拥有其一”
二、增强体验：不只是隐藏，还要禁用 + 提示
单纯 display: none 可能导致布局跳动，且对无障碍不友好。更推荐结合 disabled 和 title 提示：
立即学习“前端免费学习笔记（深入）”；
- 有权限 → 正常显示、可交互
- 无权限 → 添加
disabled属性、置灰样式、hover 显示提示（如“暂无操作权限”）
改写 bind/update 钩子：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
bind(el, binding) {
const has = checkAuth(binding.value);
if (!has) {
el.disabled = true;
el.classList.add('is-disabled-by-permit');
el.title = '暂无操作权限';
}
}
update(el, binding) {
const has = checkAuth(binding.value);
el.disabled = !has;
el.classList.toggle('is-disabled-by-permit', !has);
if (!has) el.title = '暂无操作权限';
}
再配合 CSS：
.is-disabled-by-permit {
opacity: 0.5;
cursor: not-allowed;
}
三、支持动态权限更新（响应式关键！）
如果用户权限在登录后异步加载，或切换角色后变更，需让指令“感知变化”。Vue 2 中可监听 store；Vue 3（组合式 API）建议用 watchEffect 或依赖注入权限 store。
以 Vue 3 + Pinia 为例，在指令内部监听：
import { watchEffect } from 'vue';
import { useAuthStore } from '@/stores/auth';
export default {
mounted(el, binding) {
const authStore = useAuthStore();
watchEffect(() => {
const has = authStore.hasPermission(binding.value);
el.disabled = !has;
el.classList.toggle('is-disabled-by-permit', !has);
});
}
}
四、模板中怎么用？简单又直观
在按钮上直接写权限标识符，无需额外 data 或 methods：
<button v-permit="'user:edit'" @click="edit">编辑</button></li> <li><code><button v-permit="['order:refund', 'order:cancel']">处理订单</button></li> <li>支持变量：<code>v-permit="currentBtnPerm"
，currentBtnPerm 可是响应式 ref
比 v-if 写一堆权限判断清爽得多，也避免了模板冗余和逻辑分散。
