Vue2实现动态路由配置

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

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

import Vue from 'vue'
import Router from 'vue-router'

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 则进入白名单判断）
• 已登录刷新空白（根据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();

  if (token) {
    if (to.path === "/login") {
      next({ path: "/" });      // 已登录 跳转主页
      NProgress.done();
    } else {
      try {
        const roles = await store.dispatch("user/getInfo"); //获取登录用户的类型，及roles权限
        let { role, roleslist } = 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();
});