Vue根据权限动态加载组件路由（router.addRoutes）

参考

1. Vue关于动态添加路由的一个坑，动态添加子路由
2. router.addRoutes

问题描述

1. 这两天在看“若依系统”的前端页面，重点是tab选项卡
2. 发现在他的路由配置中没有 /system/* 的配置，但是到system模块下面却能够正常显示
3. 经过两天的研读他的代码，反复查找资料，发现关键点是 router.addRoutes

官方API 解释

router.addRoutes
函数签名：

router.addRoutes(routes: Array<RouteConfig>)

动态添加更多的路由规则。参数必须是一个符合 routes 选项要求的数组。

后台返回是路由配置JSON字符串，无法直接向默认配置使用？

vue-router里提供了动态加载组件

[
  path: '/home',
  component: require.ensure([], (require) => {
      resolve(require('@/page/home.vue'))
  })
]

根据后台返回的路由配置信息动态加载组件

1. 触发Vuex 的Action去获取组件

store.dispatch('GenerateRoutes', { roles }).then(accessRoutes => {
	debugger 
  // 测试 默认静态页面
  // store.dispatch('permission/generateRoutes', { roles }).then(accessRoutes => {
	// 根据roles权限生成可访问的路由表
	router.addRoutes(accessRoutes) // 动态添加可访问路由表
	next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
})

2. 根据用户的权限，从后台获取路由配置信息，并转为Vue对象

// 生成路由
GenerateRoutes({ commit }) {
  return new Promise(resolve => {
	// 向后端请求路由数据
	getRouters().then(res => {
	  // 将后台返回的JSON数据转为 路由对象
	  const accessedRoutes = filterAsyncRouter(res.data)
	  accessedRoutes.push({ path: '*', redirect: '/404', hidden: true })
	  commit('SET_ROUTES', accessedRoutes)
	  resolve(accessedRoutes)
	})
  })
}

3. 将路由的配置信息（字符串）转为获取到Vue对象的方法

// 遍历后台传来的路由字符串，转换为组件对象
function filterAsyncRouter(asyncRouterMap) {
  return asyncRouterMap.filter(route => {
    if (route.component) {
      // Layout组件特殊处理
      if (route.component === 'Layout') {
        route.component = Layout
      } else {
        route.component = loadView(route.component)
      }
    }
	// 如果有子路由，则采用递归的方式
    if (route.children != null && route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children)
    }
    return true
  })
}

export const loadView = (view) => { // 路由懒加载
  return (resolve) =>  require([`@/views/${view}`], resolve)
}

4. 后台返回路由的配置信息，模拟数据

{
    "msg": "操作成功",
    "code": 200,
    "data": [
        {
            "name": "System",
            "path": "/system",
            "hidden": false,
            "redirect": "noRedirect",
            "component": "Layout",
            "alwaysShow": true,
            "meta": {
                "title": "系统管理",
                "icon": "system"
            },
            "children": [
                {
                    "name": "User",
                    "path": "user",
                    "hidden": false,
                    "component": "system/user/index",
                    "meta": {
                        "title": "用户管理",
                        "icon": "user"
                    }
                },
                {
                    "name": "Dept",
                    "path": "dept",
                    "hidden": false,
                    "component": "system/dept/index",
                    "meta": {
                        "title": "部门管理",
                        "icon": "tree"
                    }
                },
                {
                    "name": "Notice",
                    "path": "notice",
                    "hidden": false,
                    "component": "system/notice/index",
                    "meta": {
                        "title": "通知公告",
                        "icon": "message"
                    }
                },
                {
                    "name": "Log",
                    "path": "log",
                    "hidden": false,
                    "redirect": "noRedirect",
                    "component": "system/log/index",
                    "alwaysShow": true,
                    "meta": {
                        "title": "日志管理",
                        "icon": "log"
                    },
                    "children": [
                        {
                            "name": "Operlog",
                            "path": "operlog",
                            "hidden": false,
                            "component": "monitor/operlog/index",
                            "meta": {
                                "title": "操作日志",
                                "icon": "form"
                            }
                        },
                        {
                            "name": "Logininfor",
                            "path": "logininfor",
                            "hidden": false,
                            "component": "monitor/logininfor/index",
                            "meta": {
                                "title": "登录日志",
                                "icon": "logininfor"
                            }
                        }
                    ]
                }
            ]
        },
        {
            "name": "Monitor",
            "path": "/monitor",
            "hidden": false,
            "redirect": "noRedirect",
            "component": "Layout",
            "alwaysShow": true,
            "meta": {
                "title": "系统监控",
                "icon": "monitor"
            },
            "children": [
                {
                    "name": "Online",
                    "path": "online",
                    "hidden": false,
                    "component": "monitor/online/index",
                    "meta": {
                        "title": "在线用户",
                        "icon": "online"
                    }
                },
                {
                    "name": "Server",
                    "path": "server",
                    "hidden": false,
                    "component": "monitor/server/index",
                    "meta": {
                        "title": "服务监控",
                        "icon": "server"
                    }
                }
            ]
        }
    ]
}