Vue2实现动态路由配置

首先明确，路由挂载时只挂载静态路由。

第一部分：路由表（router/index.js）(可当做基础模板来用)

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/layout'//布局页面
 
Vue.use(Router)
 
 
//静态路由
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
]
 
//动态路由
export const asyncRoutes = [
  {
    path: '/permission',
    component: Layout,
    redirect: '/permission/page',
    name: 'Permission',
    meta: {
      title: 'Permission',
      icon: 'lock',
      roles: ['/permission'] 
    },
    
  },
 
  // 404页面
  { path: '*', redirect: '/404', hidden: true }
]
 
const createRouter = () => new Router({
  scrollBehavior: () => ({ y: 0 }),//切换路由始终保持页面顶部
  routes: constantRoutes//只挂载静态路由！！
})
 
const router = createRouter()
 
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // 重置路由，不同用户菜单权限会有所不同，在切换用户时，会出现菜单错乱的情况
}
 
export default router

第二部分：仓库中对动态路由进行权限判断

此部分结束后仓库中存储了权限判断后的：

accessedRoutes ==> 路由守卫动态添加的路由表
routes完整路由表 ==> 侧边栏sidebar使用

import { asyncRoutes, constantRoutes } from "@/router"; //静态路由也需引入，目的是为了拼接生成的有权限的动态路由，生成完成路由表
 
//根据路由表的roles字段+权限列表判断有无权限的方法 返回bool值。
function hasPermission(roles, route) {
  let role = JSON.parse(roles)
  if (route.meta && route.meta.roles) {
    return role.some((role) => route.meta.roles.includes(role));
  } else {
    return true;
  }
}
 
//根据后端传回的权限列表roles+hasPermission。
export function filterAsyncRoutes(routes, roles) {
  const res = [];
  routes.forEach((route) => {
    const tmp = { ...route };
    if (hasPermission(roles, tmp)) {
      //有权限才对其嵌套路由进行递归
      if (tmp.children) {
        //递归方式对嵌套路由过滤
        tmp.children = filterAsyncRoutes(tmp.children, roles);
      }
      res.push(tmp);
    }
  });
 
  return res;
}
 
const state = {
  routes: [],
  addRoutes: [],
};
 
const mutations = {
  SET_ROUTES: (state, routes) => {
    state.addRoutes = routes; //需要添加的动态路由表，路由守卫处使用
    state.routes = constantRoutes.concat(routes);
  },
};
 
const actions = {
  generateRoutes({ commit }, roles) {
    let { role, roleslist } = roles    //roleslist为后端返回的权限列表 为实现修改权限 故不能简单根据role判断
    return new Promise((resolve) => {
      let accessedRoutes;
      if (role.includes("admin")) {//管理员则不需按权限列表过滤
        accessedRoutes = asyncRoutes || [];
      } else {
        accessedRoutes = filterAsyncRoutes(asyncRoutes, roleslist); //根据权限列表对动态路由进行过滤
      }
      commit("SET_ROUTES", accessedRoutes); //仓库保存
      resolve(accessedRoutes);
    });
  },
};
 
export default {
  namespaced: true,
  state,
  mutations,
  actions,
};

第三部分 路由守卫

在路由守卫中派发请求

顺序：getInfo获取登录用户的权限和权限列表 （若不需要页面修改用户权限功能则可省略 ）

Tips：此步骤目的是根据登录的用户的权限列表生成有权限的路由

仅根据用户的roles字段如 [‘admin’,‘editor’] 也可以实现权限管理，但如此的话无法实现页面修改权限的功能。此处为实现权限配置，故需要如此方式。

参数：当前登录用户类型role+当前登录用户权限列表roleslist，从而生成当前用户的权限路由，供sidebar侧边栏，路由守卫动态添加路由使用。

处理三种状态：

• 已登录（本地存储了token）
• 未登录（无token 则进入白名单判断）
• 已登录刷新空白

出现白屏的原因：刷新页面的时候，vue会重新实例化，并且进行路由拦截，还没执行路由添加，路由还没添加进去，地址栏加载快于路由的添加，所以就会找不到这个路径，所以就会白屏，运用路由拦截器解决

解决办法：根据hasRoles变量判断刷新状态，由于动态添加的路由即使本地存储也会丢失，所以根据该变量在刷新时再次派发请求添加动态路由

import router from "../router";
import store from "../store";
import { Message } from "element-ui";
import NProgress from "nprogress";
import "nprogress/nprogress.css"; // 进度条插件
import { getToken } from "@/utils/auth";
import getPageTitle from "@/utils/get-page-title"; //浏览器标签卡名字拼接工具
 
NProgress.configure({ showSpinner: false }); // NProgress配置
 
const whiteList = ["/login", "/404"]; // 白名单
// 1.，每次路由切换首先根据token判断用户是否登录
let hasRoles = true
 
router.beforeEach(async (to, from, next) => {
  NProgress.start();
  document.title = getPageTitle(to.meta.title);// 标签卡title拼接
  let token = getToken();
 
  let roles;//声明用户权限列表变量
 
  if (token) {
    if (to.path === "/login") {
      next({ path: "/" });       // 已登录时跳转登录页 跳转到首页
      NProgress.done();
    } else {
      try {
          const hasGetUserlnfo = store.state.user.name//解决每次路由变化都派发请求的问题
          if (hasGetUserlnfo) {
            //已经有登录的用户信息再跳转别的页面将不在获取用户信息
           next()
          } else {
           roles = await store.dispatch('user/getInfo') //获取登录用户的类型，及roles权限
          }
 
        const accessRoutes = await store.dispatch("permission/generateRoutes", { role: role, roleslist: roleslist });
        console.log(accessRoutes);
        if (hasRoles) {
 
          router.addRoutes(accessRoutes);// 关键步骤！！注意版本 建议vue-router使用4以下版本
          hasRoles = false               //解决动态路由刷新问题
          next({ ...to, replace: true });// replace: true, 导航中将留下 history 记录
        } else {
          next()
        }
      } catch (error) {
        // 删除token，跳转登录页面
        await store.dispatch("user/resetToken");
        Message.error(error || "请重新登录");
        next(`/login?redirect=${to.path}`);
        NProgress.done();
      }
    }
  } else {
    /* 没有token*/
    if (whiteList.indexOf(to.path) !== -1) {
      //白名单列表
      next();
    } else {
      next(`/login?redirect=${to.path}`);
      NProgress.done();
    }
  }
});
 
router.afterEach(() => {
  NProgress.done();
});