vue 项目路由权限管理实现

Posted 2023-03-15

参考技术A 项目基于 vue-element-admin 基础之上进行开发，感谢 花裤衩 以及为此项目做出贡献的大佬 [社会社会]！

路由数据由后端控制，前端调用接口返回数据；前端拿到数据处理成可使用的路由结构，然后渲染到页面。

为了能提供更多的功能，后端返回的数据结构是在原来菜单结构基础之上有所改动的。

原路由数据结构：

后端返回数据结构：

路由数据采用多级嵌套结构，基本可以满足需求。

拿到接口返回的数据之后还不能直接使用，需要经过一些处理。

在本地的开发，新增页面时，为了方便开发，获取到后端返回的数据之后用了一个方法来合并数据：

temporaryMenuArray 临时路由数组的结构需要跟后端返回的数据结构一致。

使用 setTemporaryMenu :

合并完临时的路由之后就开始进行路由的处理了。

从上面后端返回的数据结构中可以看出，已经和需要处理成的路由很像了，但还是有一些数据没有必要在专门的系统那里维护，所以需要一些其他数据的处理：

routesComponents 为一个手动维护的页面路由文件：

得到的 userCanUseRouteModules 结构如下：

上面数据中的 type 为2、3层级的 component 已经被替换成对应页面的路由模块了。

得到 userCanUseRouteModules 之后，其中 name 为 storeManagement:head 的那一层数据是供头部菜单使用的，其 children 的数据才是需要添加的路由数据：

此时的 asyncRoutes 只放了默认匹配的路由，这个是需要放在所有路由的最后的：

至此对路由的处理结束。

处理路由这一步是放在 router.beforeEach 路由全局前置守卫里的，结合原有的逻辑进行了一些判断处理。

因为路由数据是由后端数据处理得到的，只包含和挂载了当前用户能有权限访问的部分，没有权限访问的路由就没有被 router.addRoutes 添加，所以并没有在路由守卫里对每次路由的跳转都进行校验。