vue 2 中推荐通过自定义指令 v-permission 实现按钮级权限控制，统一在 inserted 钩子中比对 vuex 中的权限列表与指令值，无权限时移除 dom 元素，并在 main.js 全局注册后于模板中以数组或字符串形式声明使用。
Vue 2 中实现按钮级权限控制，最常用且推荐的方式是通过自定义指令 v-permission。它不依赖每个组件重复写 v-if，而是把权限判断逻辑收口到指令内部，统一处理 DOM 显示/移除，既简洁又利于维护。
指令定义：核心是权限比对与 DOM 操作
在 src/directives/permission.js 中定义指令：
- 使用
inserted钩子（Vue 2 对应 mounted），确保元素已挂载到 DOM - 从 Vuex store 的 getter（如
store.getters.permissions）获取当前用户拥有的全部权限标识（例如['sys:user:add', 'sys:user:delete']） - 对比指令绑定的值（如
v-permission="['sys:user:add']"）是否被包含 - 若无权限，安全移除该 DOM 元素：
el.parentNode && el.parentNode.removeChild(el)
全局注册：让所有组件都能直接使用
在 main.js 中注册：
- 导入指令文件：
import permission from './directives/permission' - 调用
Vue.directive('permission', permission) - 确保注册时机早于
new Vue(...)实例创建
组件中使用：声明式、语义清晰
在模板里直接使用，支持数组或字符串形式：
<button v-permission="['sys:user:add']">新增用户</button><el-button v-permission="'sys:role:edit'">编辑角色</el-button>- 多个权限任一满足即可：指令内部用
some()+includes()判断
权限数据来源：登录后必须提前加载
指令本身不负责获取权限，依赖前置准备：
- 用户登录成功后，后端应返回该用户「可操作的按钮权限码列表」
- 前端将权限列表存入 Vuex（如
state.permissions）并暴露为 getter - 避免指令执行时权限为空 —— 可加空值校验或 fallback 提示
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
