Ant Design Pro of Vue 权限管理实战：动态路由、按钮权限与接口安全

1. 权限管理在后台系统里到底卡在哪儿

做后台管理系统的人，几乎都绕不开权限这一关。Ant Design Pro of Vue 这套脚手架把布局、路由、状态管理、请求封装都搭好了，但权限管理这块，官方给的更多是一个骨架，真正落到业务里，坑一个接一个。我见过太多项目，权限做到最后变成了“前端藏菜单、后端裸奔”，或者“按钮藏了但接口还能随便调”，上线之后被安全测试一测一个准。

这篇内容就是围绕 Ant Design Pro of Vue 的权限管理展开，把菜单权限、路由权限、按钮权限、接口权限这几层拆开讲清楚，同时把动态路由怎么生成、权限数据怎么存、刷新页面怎么不丢、后端返回的权限码怎么映射到组件上这些实操细节全部补齐。适合正在用这套脚手架做中后台、被权限绕得头晕的开发者，也适合刚接手别人权限模块、需要快速理清逻辑的同学。

先说一个我自己的判断：权限管理从来不是纯前端的事，前端做的是“体验层”的权限，真正的安全边界永远在后端。前端权限的价值在于让用户只看到他能操作的东西，减少误操作和无效请求，而不是用来防攻击。把这个定位想清楚，后面所有的设计取舍都会顺很多。

Ant Design Pro of Vue 默认的权限方案是基于access字段和AccessControl组件的一套轻量机制，配合路由的meta信息做菜单过滤。但实际项目里，权限往往是后端下发的、动态的、按角色甚至按用户细分的，这时候默认方案就不够用了，需要我们自己扩展。下面我按“数据从哪来、路由怎么变、按钮怎么控、接口怎么防”这条主线，把整套方案讲透。

2. 权限数据的来源与存储设计

2.1 权限码到底该由谁定义

很多团队在权限设计上第一步就吵起来了：权限码是前端写死还是后端下发？我的经验是，权限码的定义权必须在后端，前端只负责消费。原因很简单，权限码本质上是业务能力的标识，它跟接口、跟数据、跟角色绑定，这些东西后端最清楚。如果前端写死一套码，后端加个新功能，前端不改代码就永远用不了，维护成本极高。

但现实中常见的折中做法是：后端下发角色标识（比如admin、editor、viewer），前端根据角色映射到具体的权限码。这种做法在角色数量少、权限粒度粗的系统里够用，但一旦角色膨胀到几十个，映射表就会变成灾难。所以更推荐后端直接下发权限码列表，前端只做字符串匹配。

一个典型的权限码设计长这样：

{ "code": 0, "data": { "userInfo": { "name": "某开发者", "role": "operator" }, "permissions": [ "dashboard:view", "user:list", "user:create", "user:edit", "order:list", "order:export" ] } }

注意这里的权限码用的是模块:操作的格式，冒号分隔，好处是可读性强、层级清晰，前端做前缀匹配也方便。比如要判断用户有没有用户模块的任意权限，直接permissions.some(p => p.startsWith('user:'))就行。

2.2 权限数据存哪儿才不会刷新就丢

权限数据拿到之后，存哪里是个关键问题。Ant Design Pro of Vue 用的是 Vuex 做状态管理，很多人第一反应是存 Vuex。但 Vuex 有个致命问题：刷新页面就没了。而权限数据恰恰是刷新后必须立刻可用的，否则路由守卫拿不到权限，用户会被踢回登录页或者看到空白页。

常见的存储方案有三种，我列个表对比一下：

我的实际做法是：权限码存 localStorage，用户信息存 Vuex 并配合 localStorage 做持久化。权限码本身不是敏感信息，它只是一组字符串标识，泄露了也没用，因为真正的校验在后端。用户信息里如果有 token，那 token 要单独处理，一般存 localStorage 或 httpOnly Cookie。

这里有个细节要注意：localStorage 是同步的，读写会阻塞主线程，权限码列表如果特别大（几千条），每次读取都会卡一下。解决办法是在应用初始化时一次性读出来放进 Vuex，后续都从 Vuex 读，只在权限变更时才写回 localStorage。

2.3 登录后拉取权限的时机与顺序

权限拉取的时机很讲究。太早了，token 还没拿到；太晚了，路由已经跳转了。正确的顺序应该是：

1. 用户提交登录表单
2. 后端返回 token
3. 前端存 token
4. 用 token 请求用户信息和权限码
5. 权限码存 Vuex 和 localStorage
6. 根据权限码生成动态路由
7. 跳转到目标页面

这个顺序里，第 4 步和第 6 步是容易出问题的地方。第 4 步如果失败（比如 token 过期），要能优雅地跳回登录页，而不是卡在 loading。第 6 步生成路由时，如果权限码为空，要有兜底逻辑，比如跳到一个“无权限”页面，而不是白屏。

我在项目里通常会把这段逻辑封装成一个permission.js文件，在路由守卫里统一处理。核心思路是：每次路由跳转前，检查 Vuex 里有没有权限数据，没有就去拉，拉到了再放行，拉不到就跳登录。这样无论是首次登录还是刷新页面，逻辑都是统一的。

3. 动态路由的生成与菜单过滤

3.1 静态路由和动态路由怎么划分

Ant Design Pro of Vue 的路由分两部分：静态路由和动态路由。静态路由是所有用户都能访问的，比如登录页、404 页、无权限页；动态路由是根据权限动态挂载的，比如各种业务页面。

划分的原则很简单：不需要登录就能访问的，放静态；需要登录且需要权限的，放动态。但这里有个坑，很多人把 404 页也放动态里，结果用户没权限访问任何页面时，连 404 都看不到，直接白屏。所以 404、403 这类兜底页面必须放静态路由。

静态路由的配置大概是这样：

// router/static.js export const staticRoutes = [ { path: '/login', name: 'Login', component: () => import('@/views/login'), meta: { title: '登录' } }, { path: '/403', name: '403', component: () => import('@/views/exception/403'), meta: { title: '无权限' } }, { path: '*', redirect: '/404' } ]

动态路由则是根据后端返回的权限码，从一份完整的路由表里筛选出来的。这份完整路由表通常放在router/config.js里，每个路由的meta里带上permission字段，标识访问它需要的权限码。

3.2 根据权限码筛选路由的完整逻辑

筛选逻辑的核心是递归遍历路由表，检查每个路由的meta.permission是否在用户的权限码列表里。这里要注意几个细节：

第一，父路由的权限和子路由的权限关系。如果父路由有权限要求，子路由没有，那父路由没权限时，子路由也不该显示。反过来，父路由没权限要求，子路由有，那父路由应该保留，但只显示有权限的子路由。

第二，路由的 hidden 字段。有些路由是详情页，比如/user/detail/:id，它不应该出现在菜单里，但需要能被访问。这类路由要标记hidden: true，筛选时保留但菜单不渲染。

第三，权限码的匹配方式。是精确匹配还是前缀匹配？我的建议是精确匹配为主，因为前缀匹配容易误伤。比如user:list和user:list:export，如果前缀匹配，有user:list的人就能访问导出，这显然不对。

下面是一段我实际用过的筛选函数：

function filterRoutes(routes, permissions) { const result = [] routes.forEach(route => { const required = route.meta && route.meta.permission // 没有权限要求，直接保留 if (!required) { if (route.children) { route.children = filterRoutes(route.children, permissions) } result.push(route) return } // 有权限要求，检查是否拥有 const hasPermission = Array.isArray(required) ? required.some(p => permissions.includes(p)) : permissions.includes(required) if (hasPermission) { if (route.children) { route.children = filterRoutes(route.children, permissions) } result.push(route) } }) return result }

这段代码里，required支持数组是为了处理“或”的关系，比如某个页面admin和editor都能访问，就写成['admin', 'editor']。如果需要“与”的关系，那就得另外处理，但实际项目里“与”的场景很少。

3.3 动态挂载路由的时机与坑

筛选出动态路由后，怎么挂载到 router 实例上？Ant Design Pro of Vue 用的是 Vue Router，动态添加路由用router.addRoutes()（Vue Router 3.x）或router.addRoute()（Vue Router 4.x）。这里有个大坑：addRoutes 必须在路由跳转之前完成，否则跳转的目标路由还没注册，会直接 404。

我踩过的坑是这样的：在路由守卫beforeEach里拉权限、生成路由、addRoutes，然后调用next()。看起来没问题，但实际上next()执行时，新路由可能还没生效，导致跳转失败。解决办法是用next({ ...to, replace: true })重新触发一次跳转，这时候新路由已经注册好了。

router.beforeEach(async (to, from, next) => { const hasPermission = store.getters['user/hasPermission'] if (!hasPermission) { try { await store.dispatch('user/fetchPermissions') const routes = await store.dispatch('user/generateRoutes') routes.forEach(route => router.addRoute(route)) next({ ...to, replace: true }) } catch (e) { next('/login') } } else { next() } })

还有一个坑是重复添加路由。如果用户退出登录再登录，或者权限变更后重新生成路由，旧的路由还在 router 里，新的又加进去，会导致路由冲突。解决办法是记录已添加的路由，退出时用router.removeRoute()移除，或者干脆刷新页面重置 router 实例。

4. 按钮级权限的控制手段

4.1 用自定义指令做按钮权限

菜单和路由的权限是粗粒度的，按钮权限才是细粒度的。Ant Design Pro of Vue 默认提供了AccessControl组件，但用起来有点繁琐，每次都要包一层。我更推荐用自定义指令，写起来简洁，用起来也直观。

指令的实现思路很简单：在mounted钩子里检查当前元素需要的权限码，如果没有就移除元素。为什么是移除而不是隐藏？因为隐藏的元素还在 DOM 里，懂行的人打开控制台改个样式就能看到，虽然前端权限防不住有心人，但能防住一部分是一部分。

// directives/permission.js import store from '@/store' export default { inserted(el, binding) { const { value } = binding const permissions = store.getters['user/permissions'] if (value && value instanceof Array && value.length > 0) { const hasPermission = permissions.some(p => value.includes(p)) if (!hasPermission) { el.parentNode && el.parentNode.removeChild(el) } } else { throw new Error('需要指定权限码，如 v-permission="[\'user:create\']"') } } }

用的时候直接：

<a-button v-permission="['user:create']">新建用户</a-button>

这里有个细节：inserted只在元素插入 DOM 时触发一次，如果权限是动态变化的（比如切换角色），指令不会重新执行。这种情况需要用update钩子，或者干脆在权限变化时刷新页面。实际项目里权限变化通常发生在登录/登出，刷新页面是可接受的。

4.2 函数式权限判断的封装

指令适合控制单个按钮的显示，但有些场景需要在 JS 里判断权限，比如点击按钮后根据权限决定跳哪个页面，或者表格里根据权限决定显示哪些操作列。这时候就需要一个函数式的判断方法。

我通常会在 Vuex 的 getters 里封装一个hasPermission方法：

// store/modules/user.js getters: { permissions: state => state.permissions, hasPermission: state => (code) => { if (!code) return true if (Array.isArray(code)) { return code.some(c => state.permissions.includes(c)) } return state.permissions.includes(code) } }

然后在组件里：

computed: { canExport() { return this.$store.getters['user/hasPermission']('order:export') } }

这种方式的灵活性最高，适合复杂的权限判断逻辑。但要注意，getters 里返回函数会导致缓存失效，每次访问都会重新计算。如果权限码列表很大，频繁调用会有性能问题。优化办法是把权限码转成 Set，查找复杂度从 O(n) 降到 O(1)。

4.3 按钮权限和接口权限的配合

按钮权限藏了，不代表接口就安全了。我见过最离谱的案例是：前端把删除按钮藏了，但删除接口没做权限校验，结果有人直接用 Postman 调接口把数据删了。所以按钮权限和接口权限必须配合使用，前端藏按钮是体验，后端校验接口是安全。

后端校验接口权限的常见做法是在网关或拦截器里检查 token 对应的权限码，看是否包含接口所需的权限。前端要做的，是在请求头里带上 token，并且处理好 403 响应。当接口返回 403 时，前端应该给出明确的提示，而不是笼统的“请求失败”。

// utils/request.js service.interceptors.response.use( response => response.data, error => { if (error.response && error.response.status === 403) { Message.error('您没有权限执行此操作') return Promise.reject(error) } // 其他错误处理 } )

这样用户即使通过某种方式触发了无权限的操作，也能得到清晰的反馈，而不是一脸懵。

5. 权限变更与刷新时的状态同步

5.1 切换角色后权限怎么实时更新

有些系统支持用户切换角色，比如一个账号既是管理员又是普通用户，可以在界面上切换。这时候权限数据变了，菜单、路由、按钮都要跟着变。最粗暴的做法是切换后刷新页面，但体验很差。

更好的做法是：切换角色后，重新拉取权限码，清空已注册的动态路由，重新生成并挂载。这里的关键是清空旧路由，否则新旧路由混在一起会出问题。Vue Router 3.x 没有直接清空路由的 API，需要自己记录添加过的路由，逐个 remove。

// 记录已添加的路由 const addedRoutes = [] function resetRoutes(router) { addedRoutes.forEach(route => { if (route.name && router.hasRoute(route.name)) { router.removeRoute(route.name) } }) addedRoutes.length = 0 }

清空之后重新走一遍生成和挂载流程，然后跳转到当前页面的替代页（因为当前页面可能在新权限下不可访问了）。这套逻辑写起来不复杂，但要注意处理边界情况，比如切换后当前页面无权限，要跳到 403 或首页。

5.2 刷新页面时权限数据的恢复

刷新页面是权限管理最容易出问题的地方。因为 Vuex 清空了，路由也重置了，如果处理不好，用户会看到一闪而过的登录页，或者直接跳到 404。

正确的处理流程是：

1. 应用启动，Vuex 初始化
2. 路由守卫触发，检查是否有 token
3. 有 token，从 localStorage 读权限码
4. 如果 localStorage 有权限码，直接用，生成路由
5. 如果没有，用 token 请求权限码，存起来，再生成路由
6. 生成路由后，next({ ...to, replace: true })重新跳转

这里第 4 步和第 5 步的区别在于：如果 localStorage 里有权限码，可以省一次请求，加快首屏速度；但权限码可能已经过期（比如后端改了权限），所以更稳妥的做法是每次都请求，但用 localStorage 做兜底，请求失败时用缓存。

我在项目里的做法是：localStorage 存权限码，但每次刷新都异步请求最新权限，请求成功就更新，请求失败就用缓存。这样既保证了速度，又保证了准确性。

5.3 多标签页场景下的权限同步

后台系统经常会在多个标签页打开，如果一个标签页退出登录，另一个标签页的权限数据还在，用户还能操作，这就很危险。解决办法是用storage事件监听 localStorage 的变化。

window.addEventListener('storage', (e) => { if (e.key === 'permissions' && !e.newValue) { // 权限被清空，说明在别的标签页退出了 store.dispatch('user/logout') router.push('/login') } })

这个事件只在其他标签页修改 localStorage 时触发，当前标签页修改不会触发，正好符合需求。注意e.newValue为 null 表示键被删除，也就是权限被清空了。

6. 几个真实踩过的坑和排查思路

6.1 动态路由添加后刷新 404 的排查

这个坑我踩过不止一次。现象是：登录后菜单正常，点击菜单也能跳转，但一刷新页面就 404。排查思路是这样的：

首先看路由守卫的执行顺序。刷新时，beforeEach触发，此时 Vuex 是空的，动态路由还没添加。如果守卫里直接next()，就会去找目标路由，找不到就 404。所以守卫里必须先判断权限数据是否存在，不存在就先拉取、生成、添加路由，再next({ ...to, replace: true })。

其次看addRoute的调用时机。如果在next()之后才调用addRoute，那这次跳转肯定找不到路由。必须确保addRoute在next之前完成。

最后看路由的path是否匹配。动态路由的path如果是相对路径，挂载到父路由下会拼接，可能导致实际路径和预期不一致。建议动态路由都用绝对路径，避免拼接问题。

6.2 权限码大小写和空格导致的匹配失败

这个问题很隐蔽。后端返回的权限码是User:Create，前端写的是user:create，匹配不上，按钮死活不显示。排查的时候看代码觉得没问题，实际是大小写不一致。

解决办法是统一规范：要么全小写，要么全大写，前后端约定好。我一般要求全小写，冒号分隔。另外要注意空格，后端返回的字符串如果带了首尾空格，includes也会匹配失败。稳妥的做法是在存储权限码时统一trim()和toLowerCase()。

const permissions = res.data.permissions.map(p => p.trim().toLowerCase())

6.3 按钮权限指令在弹窗里失效的问题

Ant Design Vue 的 Modal 是懒渲染的，弹窗内容在打开时才插入 DOM。如果按钮在弹窗里，v-permission指令的inserted钩子会在弹窗打开时触发，这时候权限数据是有的，按理说没问题。但实际遇到过弹窗打开时权限数据还没加载完的情况，导致按钮被误删。

解决办法是在弹窗打开前确保权限数据已加载，或者在指令里加一个延迟检查。更稳妥的做法是权限数据在应用初始化时就加载好，而不是等到用的时候才拉。这样任何组件渲染时权限都是就绪的。

6.4 路由守卫死循环的定位

路由守卫死循环是权限管理里的经典问题。现象是页面一直转圈，控制台疯狂打印日志。原因通常是：守卫里判断无权限就next('/login')，但/login也触发了守卫，守卫又判断无权限，又跳/login，无限循环。

解决办法是在守卫里加白名单，登录页、403 页这些不需要权限的页面直接放行：

const whiteList = ['/login', '/403', '/404'] if (whiteList.includes(to.path)) { next() return }

另外，next({ ...to, replace: true })这种写法如果处理不当也会死循环，因为它会重新触发守卫。要确保重新触发时，权限数据已经就绪，守卫能走到next()分支，而不是又去拉权限。

7. 权限方案的扩展方向

7.1 从角色权限到数据权限

前面讲的都是功能权限，也就是“能不能访问某个页面/按钮”。但实际业务里还有数据权限，也就是“能看到哪些数据”。比如同样是订单列表页，普通销售只能看自己的订单，销售主管能看团队的，区域经理能看整个区域的。

数据权限通常不在前端做，而是后端在查询时根据用户角色拼接 SQL 条件。前端要做的，是把用户的角色或数据范围标识传给后端，后端返回过滤后的数据。前端不需要知道具体过滤逻辑，只需要展示。

但有些场景前端也需要感知数据权限，比如导出按钮，有数据权限的人才能导出。这时候可以把数据权限也抽象成权限码，比如order:export:all和order:export:self，前端根据权限码决定导出范围。

7.2 权限配置的可视化

权限码写死在代码里，每次加功能都要改代码，维护成本高。更高级的做法是做一套权限配置界面，管理员可以在界面上给角色分配权限，后端存储角色和权限码的映射关系。前端只需要从后端拉取当前用户的权限码列表，不需要关心权限是怎么分配的。

这套方案的关键是权限码的元数据管理。后端需要维护一份权限码清单，包括权限码、名称、所属模块、描述等信息。前端在配置界面里展示这份清单，管理员勾选后保存。这样加新功能时，只需要在后端注册新的权限码，前端配置界面自动就能看到。

7.3 权限缓存与性能优化

权限码列表如果很大，每次路由跳转都遍历一遍会有性能问题。优化思路有几个：

第一，把权限码转成 Set，查找复杂度从 O(n) 降到 O(1)。这个改动很小，但效果明显。

第二，路由筛选结果缓存起来，权限没变时不重复计算。可以在 Vuex 里存一份筛选后的路由，权限变更时才重新生成。

第三，按钮权限指令里避免频繁读取 Vuex，可以在指令绑定时把权限码列表传进去，而不是每次从 store 读。

这些优化在权限码几百条以内时感知不明显，但上千条时差距就出来了。我做过一个测试，权限码 2000 条时，不做优化每次路由跳转要 30ms 左右，优化后降到 2ms 以内。

8. 写在最后的一点个人体会

权限管理这块，我最大的体会是：不要追求一步到位，要跟着业务演进。早期项目角色少、权限简单，用角色映射就够了，没必要上权限码。等角色多了、权限细了，再逐步迁移到权限码方案。一上来就设计一套复杂的权限系统，往往是过度设计，维护起来还累。

另一个体会是：前端权限永远只是体验层，安全必须靠后端。我见过太多团队把精力花在前端藏按钮上，后端接口却裸奔，这是本末倒置。正确的做法是后端接口严格校验，前端权限做锦上添花。这样即使前端权限被绕过，也不会造成实际损失。

最后分享一个小技巧：在开发阶段，可以做一个“权限调试面板”，把当前用户的权限码列表展示出来，方便排查权限问题。这个面板只在开发环境显示，上线时自动隐藏。有了它，排查权限问题时不用再翻 localStorage 或者打断点，效率能提升不少。