后台管理系统基于角色来渲染不同的menu-item

渲染对应的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
    }