动态路由和鉴权重构，这个过程真的把项目维护成本降了70%，还让权限变更后页面秒级刷新。早在年初写了一篇关于Vue动态渲染路由的文章，那时候为了快速落地，把鉴权逻辑全塞到了前端。半年过去，代码不断被Review，终于把冗余部分砍掉了70%。这次完全把路由状态交给后端去处理，前端只需要按需拉取和渲染就好。这个新方案不仅让部署更简单，还把侧边栏、面包屑、菜单折叠这些细节都交给了Vuex管理。每次权限变更，页面直接刷新。之前用过前端鉴权方案的中小型项目里，前端鉴权还是香。权限颗粒度小、角色不多就不用后端去维护路由表了，部署成本低且代码量少。不过现在大中型项目就不一样了，角色上百、权限动态增减怎么办？再去线上改权限又要重新打包？！这次把路由状态交给后端之后，前端就只需按需拉取数据就好。需求响应速度直接翻倍。登录成功后立马拉取后端返回的角色路由清单，解析之后存进Vuex中。刷新页面就会重复这个过程，旧路由自动被覆盖。旧方案是把登录态存在localStorage里，现在全给挪到cookie里了，路由信息也全部交给Vuex管理了。把本地存储去掉后系统稳定性真的提升了不少。我们在router/router.js里面定义一份极简静态路由，只包含登录、404、首页这些保底页面。真正的角色页面由后端一次性返回，格式就像这样子的。 把树形结构再变成树形结构这个核心思路可真厉害！利用_import函数动态导入组件同时递归生成菜单数据。先把空数组接住所有异步路由，遍历后端返回的原始数组进行基础信息填充和递归处理子节点，然后把处理好的路由对象存入asyncRouter数组中。 最后通过Promise处理完成后通过store action把解析好的路由存进Vuex中即可完成整个流程。VueRouter的addRoutes方法一次性注入就搞定渲染了。防止网络抖动导致数据没拿到跳转空白页时也会挂上一个兜底路由404。