Vue权限控制核心是结构化管理权限数据并分层封装getter：模块/操作/实例三级嵌套结构，配合路由守卫拦截与响应式按需计算，避免异步、缓存及副作用问题。
在 Vue 项目中，用 getters 动态计算权限按钮，本质是把「用户角色 + 路由/组件级权限标识 + 当前上下文」三者结合，实时产出布尔值。关键不在“怎么写 getter”，而在于权限数据如何结构化、何时更新、以及如何避免重复判断。
权限数据必须集中管理，且带层级语义
不要把权限写成零散的字符串数组（如 ['user:edit', 'order:delete']）就完事。推荐用嵌套对象或带 scope 的结构：
- 模块级：如 user、order
- 操作级：如 view、create、update、delete
- 实例级（可选）：如 own（仅本人）、dept（本部门）——这类需结合当前页面数据动态判断
对应 store 中的 state 可设计为：
state: {
permissions: {
user: ['view', 'create', 'update'],
order: ['view', 'delete'],
report: ['export']
},
roleScopes: {
user: 'own', // 表示 user 模块下只允许操作自己的数据
order: 'dept'
}
}
getter 要分层封装，不直接暴露原始数组
避免在模板里写 v-if="permissions.includes('user:update')"。应通过语义化 getter 封装逻辑：
- hasPerm(module, action)：基础判断，检查 permissions 是否包含该模块+动作
- canEditUser(id)：结合 roleScopes 和当前用户 ID，判断能否编辑指定用户（用于按钮级细粒度控制）
- showDeleteOrderBtn(order)：传入订单对象，内部自动判断是否属于本部门、是否已支付等业务规则
这样模板里就变成：
路由级权限拦截 + 组件内按需触发 getter
全局权限不能只靠按钮显隐——要配合路由守卫做第一道防线：
- 在 router.beforeEach 中调用 hasPerm(to.meta.module, to.meta.action)，无权限则跳转 403 或首页
- 组件内不要在 mounted 里一次性计算所有按钮状态；改用 computed 或 useMemo（Vue 3）按需响应式计算
- 当用户角色变更（如切换租户、刷新权限）时，只 commit 一个 SET_PERMISSIONS mutation，所有依赖 getters 自动更新，无需手动刷新组件
避免常见坑：缓存、异步、副作用
权限不是静态配置，容易出错的点：
- 不要在 getter 里发请求：权限数据应由登录后统一拉取并存入 store，getter 必须是纯函数
- 避免深层响应式陷阱：如果权限数据来自后端 JSON，用 Object.freeze 或 markRaw 防止 Vue 过度代理影响性能
- 按钮禁用 ≠ 权限缺失：比如「删除」按钮可能因状态（已归档）、时间（超时）、数量（少于 2 条）禁用，这些应和权限逻辑分离，用独立 computed 控制 isDisabled
