Vue2指令开发如何使用自定义指令实现按钮级别的权限控制

Vue 2 中推荐通过自定义指令 v-permission 实现按钮级权限控制，统一在 inserted 钩子中比对 Vuex 中的权限列表与指令值，无权限时移除 DOM 元素，并在 main.js 全局注册后于模板中以数组或字符串形式声明使用。

Vue 2 中实现按钮级权限控制，最常用且推荐的方式是通过自定义指令 v-permission。它不依赖每个组件重复写 v-if，而是把权限判断逻辑收口到指令内部，统一处理 DOM 显示/移除，既简洁又利于维护。

指令定义：核心是权限比对与 DOM 操作

在 src/directives/permission.js 中定义指令：

1. 使用 inserted 钩子（Vue 2 对应 mounted），确保元素已挂载到 DOM
2. 从 Vuex store 的 getter（如 store.getters.permissions）获取当前用户拥有的全部权限标识（例如 ['sys:user:add', 'sys:user:delete']）
3. 对比指令绑定的值（如 v-permission="['sys:user:add']"）是否被包含
4. 若无权限，安全移除该 DOM 元素：el.parentNode && el.parentNode.removeChild(el)

全局注册：让所有组件都能直接使用

在 main.js 中注册：

1. 导入指令文件：import permission from './directives/permission'
2. 调用 Vue.directive('permission', permission)
3. 确保注册时机早于 new Vue(...) 实例创建

组件中使用：声明式、语义清晰

在模板里直接使用，支持数组或字符串形式：

1. <button v-permission="['sys:user:add']">新增用户</button>
2. <el-button v-permission="'sys:role:edit'">编辑角色</el-button>
3. 多个权限任一满足即可：指令内部用 some() + includes() 判断

权限数据来源：登录后必须提前加载

指令本身不负责获取权限，依赖前置准备：

1. 用户登录成功后，后端应返回该用户「可操作的按钮权限码列表」
2. 前端将权限列表存入 Vuex（如 state.permissions）并暴露为 getter
3. 避免指令执行时权限为空 —— 可加空值校验或 fallback 提示