vue + vuex + vue-router 配置动态路由

项目说明

系统有多个角色身份，对应不同的角色身份展示对应不同的角色功能，也就对应不同的功能页面。一般登录后，由后端根据不同的角色登录返回不同的菜单目录以及不同的权限页面。前端根据后端返回信息，动态的生成菜单目录以及注册前端页面。

解决思路

根据不同角色登录后台返回权限以及目录信息，动态的生成路由以及菜单目录。由于系统是按照不同的页面对应不同的功能权限，不同的页面配置对应不同的权限code。后端会在返回菜单的同时，把权限code列表一起返回。因此，设计思路如下

1. 路由配置 ，将路由分为两个部分，不需要进行权限判断的静态路由和根据后端返回需要展示的动态路由；
2. 全局前置守卫中动态添加路由，校验页面权限。将后端返回的路由列表动态添加到路由中，页面跳转之前，判断是否有权限进入页面。若无权限，跳转401页面

解决步骤

路由配置
该系统了路由分为两个部分，1.系统默认不需要权限配置的页面路由 2.需要由后端返回权限的页面路由。将本地默认不需要配置权限的页面路由先挂载注册。

import Vue from 'vue'
import Router from 'vue-router'
import { Layout } from "../layout"; // 页面整体布局

Vue.use(Router)

//动态引入页面
export const pageList = {
  information: () => import("@/page/authorityManagement/informationManagement"), //个人信息管理
  authorityRole: () =>
    import("@/page/authorityManagement/rolePermission/index"), //角色权限管理
  "subscriberData/index": () =>
    import("@/page/authorityManagement/subscriberData/index"), //用户资料管理
  changePassword: () => import("@/page/authorityManagement/changePassword"), //修改密码
};
//手动跳转的页面白名单
const whiteList = [
  '/login'
];
//默认不需要权限的页面
export const constantRouterMap = [
  { path: '/login', name: 'login', component: () => import('@/page/login/index'), hidden: true },
  { path: '/404', component: () => import('@/page/errorPage/404'), hidden: true },
  { path: '/401', component: () => import('@/page/errorPage/401'), hidden: true },