渲染对应的menu-item其实需要看后端返回什么样的数据结构，我们才来确定用何种方式渲染。然后来添加动态路由。
在注册所有menu-item对应的路由映射
这个方法虽然很简单，但是不能避免用户在浏览器输入框中输入正确的url，渲染出了该角色不具备的menu-item对应的路由。
根据后端返回的不同角色，在前端事先写好每个角色对应的路由映射
我们登录的时候，会返回用户的数据，我们根据该用户的角色，来匹配到前端写好的路由映射。
{ superAdmin: [{path, component}, {...}], others: [{path, component}, {...}], ... }
这种方法，当后端新增了角色，我们就得在前端写好该角色的对应的路由映射数组。
根据后端返回的不同角色，然后请求该角色对应的权限列表。
这个方法，需要后端和后端高度的配合，它需要返回该角色对应的权限列表。内部提供路由映射的url。
[ { "id": 1, "name": "系统管理", "icon": "<tools />", "type": 1, "url": "/main/system", "children": [ { "id": "1-1", "name": "用户管理", "type": 2, "url": "/main/system/user" }, { "id": "1-2", "name": "部门管理", "type": 2, "url": "/main/system/department" }, { "id": "1-3", "name": "菜单管理", "type": 2, "url": "/main/system/menu" }, { "id": "1-4", "name": "角色管理", "type": 2, "url": "/main/system/role" } ] } ]
然后前端提供给url和component的映射文件。
const category = () => import('@/views/main/product/category/category.vue') export default { path: '/main/product/category', name: 'category', component: category, children: [] }
然后自己定义一个工具方法，来根据不同的角色映射不同的路由。
- 先将超级管理员权限中的路由映射收集到一个数组中
- 然后根据不同角色来筛选路由
- 将筛选后的路由动态添加到routes对应的位置中。
import { RouteRecordRaw } from 'vue-router' export default function MapRoute(userMenus: any): RouteRecordRaw[] { const routes: RouteRecordRaw[] = [] // 将该后台管理超级管理员中的url都映射出来，然后根据不用用户来筛选出路由映射 const allRoutes: RouteRecordRaw[] = [] // 表示递归擦选router/main文件下的ts文件。 const routeFiles = require.context('../router/main', true, /\.ts/) routeFiles.keys().forEach((item) => { // console.log('item', item) // 将ts文件导出的route添加到allRoutes const route = require('../router/main' + item.split('.')[1]) allRoutes.push(route.default) }) // 根据userMenus来筛选路由映射，递归 const _recurseGetRoute = (menus: any[]) => { for (const menu of menus) { if (menu.type === 2) { const route = allRoutes.find((route) => route.path === menu.url) if (route) { routes.push(route) } } else { _recurseGetRoute(menu.children) } } } _recurseGetRoute(userMenus) return routes }
