路由守卫不处理按钮级权限，仅控制页面跳转；按钮权限由自定义指令v-permission实现，通过比对用户权限数组与指令传入的权限码（如['user:delete']）决定按钮显隐，确保页面内操作入口精细化控制。
路由守卫本身不直接处理按钮级权限，它的职责是控制页面跳转，而不是控制页面内元素的显隐。按钮级权限需要配合自定义指令 + 权限数据，在 DOM 渲染阶段做判断。
按钮权限的核心逻辑：靠指令，不是守卫
用户进入某个页面后，页面已渲染，此时路由守卫早已执行完毕。按钮是否显示、是否可点击，取决于当前用户是否拥有对应操作权限（如 user:delete、order:export）。这个判断必须在组件挂载或更新时实时进行，因此采用 Vue 自定义指令是最自然、解耦性最好的方式。
典型实现思路是：
- 登录后从后端获取用户全部权限标识（字符串数组，如 ['user:view', 'user:edit', 'order:list']）
- 将该权限列表存入 Pinia/Vuex 或 localStorage（注意：仅作前端展示控制，关键操作仍需后端鉴权）
- 定义 v-permission 指令，接收权限码数组作为参数
- 指令内部比对当前用户权限是否包含任一传入码，决定是否隐藏按钮
自定义指令示例（Vue 3 + Pinia）
在 src/directives/permission.ts 中：
立即学习“前端免费学习笔记（深入）”；
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
import { Directive, getCurrentInstance } from 'vue'
import { useUserStore } from '@/store/user'
export const permission: Directive = {
mounted(el, binding) {
const { value } = binding
const userStore = useUserStore()
const userPerms = userStore.permissions // 如 ['dashboard:view', 'user:edit']
if (!Array.isArray(value) || value.length === 0) {
el.style.display = 'none'
return
}
const hasPermission = value.some(perm => userPerms.includes(perm))
if (!hasPermission) {
el.style.display = 'none'
// 或 el.remove() 彻底移除节点
}
}
}
使用方式：
<button v-permission="['user:delete']">删除用户</button> <el-button v-permission="['order:export']">导出订单</el-button>
为什么不能只靠路由守卫？
因为守卫只在路由切换时触发一次，而一个页面里可能有多个按钮、多个权限点，且用户角色可能在不刷新页面的情况下变更（如管理员后台实时调整权限）。若把按钮控制逻辑塞进守卫，会导致：
- 无法响应组件内动态权限变化（比如异步加载完权限后再渲染按钮）
- 与视图层强耦合，违背关注分离原则
- 重复校验开销大，且无法精准控制单个 DOM 节点
配合路由守卫形成完整链路
虽然按钮权限不由守卫执行，但它和守卫是协同工作的：
- 守卫负责“进得来”：拦截未登录/无角色用户访问整个页面
- 指令负责“看得见、点得着”：在页面内精细化控制每个操作入口
- 两者共用同一套权限数据源（如 Pinia 中的 userStore.permissions），确保前后一致
例如：用户有 user 角色但无 user:delete 权限，守卫允许其进入用户列表页，而指令自动隐藏“删除”按钮。
