动态路由 addRoute

动态路由

动态路由主要通过两个函数实现。router.addRoute()和router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用router.push()或router.replace()来手动导航，才能显示该新路由。

为什么需要

根据用户的身份、角色或权限级别来控制对特定路由或页面的访问权限。

通过路由权限控制，你可以确保只有经过授权的用户才能访问特定的路由或页面，提高应用的安全性和保护用户数据。

路由配置

登录前的可使用路由

import Vue from "vue"; 
import VueRouter from "vue-router"; 
import store from "../store/index";
const staticRoutes = [
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login/index.vue')
  },
  {
    path: '/404',
    component: () => import('@/components/error-page/404.vue'),
  },
  { path: '/:pathMatch(.*)*', name: 'NotFound', redirect: '/404' },

]

在登陆成功时，获取用户身份,动态添加路由

export const asyncRoutes = [{
        path: '/pageA',
        name:'pageA',
        component: () => import('@/view/asyncPage/pageA.vue'),
        meta: {
            title: '系统管理',
        }
    },
     {
        path: '/pageB',
        name:'pageB',
        component: () => import('@/view/asyncPage/pageB.vue'),
        meta: {
            title: '账号管理',
        },
    }]

路由导航

router.beforeEach((to, from, next) => {
  if (to.path == "/login") return next();
  const token = localStorage.getItem("token");
  if (!token) return next("/login");
  // 解决页面刷新，动态路由丢失，所以重新add
  if (!to.name && store.state.userInfo.role == "admin") {
    asyncRoutes.forEach((item) => {
      router.addRoute(item);
    });
    next({ ...to, replace: true });
  } else {
    next();
  }
});
export default router;

vuex

import Vue from "vue";
import Vuex from "vuex";
import { staticRoutes, asyncRoutes } from "../router/index";
import router from "../router/index";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"),
    routes: localStorage.getItem("routes")
      ? JSON.parse(localStorage.getItem("routes"))
      : staticRoutes,
  },
  mutations: {
    // 存储用户信息
    saveUserInfo(state, data) {
      state.userInfo = data;
      localStorage.setItem("token", data.token);
      localStorage.setItem("userInfo", JSON.stringify(data));
    },
    // 动态路由,根据这个路由生成菜单
    saveRoutes(state) {
      if (state.userInfo.role == "admin") {
        asyncRoutes.forEach((item) => {
          router.addRoute(item);
        });
        state.routes = constantRoutes.concat(asyncRoutes);
      } else {
        state.routes = constantRoutes;
      }
      localStorage.setItem("routes", JSON.stringify(state.routes));
    },
  },
  actions: {},
  modules: {},
});