使用vue2+element+vue-admin-template创建单页应用小记-2.动态权限路由加载

1. 修改@/src/router/index.js(@代表项目根路径，下同)
   1. 定义静态路由变量，代表登录前的两个页面login和404

      export const constantRouterMap = [
        { path: '/login', component: () => import('@/views/login/index'), hidden: true },
        { path: '/404', component: () => import('@/views/404'), hidden: true }
      ]

       

   2. 定义动态路由变量，加入各个菜单的权限角色定义，通过meta的roles属性定义数组（具体菜单根据项目调整，此处仅作示例）

   3. export const asyncRouterMap = [{
        path: '/',
        component: Layout,
        redirect: '/dashboard',
        name: 'Dashboard',
        hidden: true,
        children: [{
          path: 'dashboard',
          component: () => import('@/views/dashboard/index')
        }]
      },
      
      {
        path: '/example',
        component: Layout,
        redirect: '/example/table',
        name: 'Example',
        meta: { 
          roles: ['superAdmin', 'admin'],
          title: 'Example',
           icon: 'example' 
        },
        children: [
          {
            path: 'table',
            name: 'Table',
            component: () => import('@/views/table/index'),
            meta: { title: 'Table', icon: 'table' }
          },
          {
            path: 'tree',
            name: 'Tree',
            component: () => import('@/views/tree/index'),
            meta: { title: 'Tree', icon: 'tree' }
          }
        ]
      },
      
      { path: '*', redirect: '/404', hidden: true }
      ]

      修改@/src/permission.js（仅作最简修改得以使用，不做代码规范）

      1. 添加判断权限的函数

         import {
           constantRouterMap,
           asyncRouterMap
         } from './router'
         
         function hasPermission(roles, route) {
           if (route.meta && route.meta.roles) {
             return roles.some(role => route.meta.roles.indexOf(role) >= 0)
           } else { // 没有配置权限的全部显示
             return true
           }
         }
         

          

      2. 拉取用户信息后，添加权限判断，动态添加路由（代码"store.dispatch('GetInfo').then(res => { "后添加）

                   const roles = res.data.roles
                   var accessedRouters = []
                   new Promise(resolve => {
                     accessedRouters = asyncRouterMap.filter(v => {
                       if (hasPermission(roles, v)) {
                         if (v.children && v.children > 0) {
                           // 存在子菜单
                           v.children = v.filter(child => {
                             if (hasPermission(roles, child)) {
                               return child
                             }
                             return false
                           })
                           return v
                         }
                         return v // 拥有权限，将菜单加入
                       }
                       return false
                     })
                     resolve()
                   })
         
                   router.addRoutes(accessedRouters)
                   router.options.routes = constantRouterMap.concat(accessedRouters)
         
                   next({
                     ...to,
                     replace: true
                   })

          

      3.  

   4.