integrated_traffic_vue/src/addRouters.js

import router from "./router";
import { useRouterStore } from "./pinia/router";
import { useMenuStore } from "./pinia/menu";
import { useUserStore } from "@/pinia/user";
import { cloneDeep } from "lodash-es";
import pinia from "./pinia";
import children from "@/components/children/index";
import { MODEL } from "@/assets/js/constant";
// import asyncRouter from "@/assets/js/asyncRouter";
import { getAsyncRouter } from "@/request/api";

const modules = import.meta.glob([
  "./views/**/*.vue",
  "!./views/**/components/*.vue",
]); // 获取到views下所有的vue文件
let storageRouter = null; // 用来获取后台拿到的路由

router.beforeEach(async (to, from, next) => {
  const routerStore = useRouterStore(pinia);
  const menuStore = useMenuStore(pinia);
  const userStore = useUserStore(pinia);
  // 需要登陆
  if (to.meta.isLogin !== false) {
    if (!userStore.getUserInfo.USER_ID) {
      next("/login");
      return;
    }
    if (!storageRouter) {
      // 变量里没有储存路由
      // pinia里没有储存路由，去后台获取路由
      if (routerStore.getRouters.length === 0) {
        const resData = await getAsyncRouter();
        storageRouter = resData.routeList; // 后台请求得到的路由数据
        // storageRouter = asyncRouter; // 死路由
        routerStore.setRouters(storageRouter); // 存储路由
        routerGo(to, next); // 执行路由跳转方法
      } else {
        // pinia里储存了路由
        storageRouter = routerStore.getRouters; // 拿到路由
        routerGo(to, next); // 执行路由跳转方法
      }
    } else {
      next();
    }
  } else {
    // 不需要登陆，清空储存路由
    storageRouter = null;
    routerStore.$reset();
    menuStore.$reset();
    next();
  }
});
function routerGo(to, next) {
  const menuStore = useMenuStore(pinia);
  storageRouter = filterAsyncRouter(cloneDeep(storageRouter)); // 过滤路由
  for (let i = 0; i < storageRouter.length; i++) {
    router.addRoute("app", storageRouter[i]); // 动态添加路由
  }
  router.addRoute({ path: "/:pathMatch(.*)*", redirect: "/404" }); // 将404路由添加到最后
  for (let i = 0; i < router.options.routes.length; i++) {
    if (router.options.routes[i].path === "/") {
      menuStore.setMenus(
        router.options.routes[i].children.concat(storageRouter)
      ); // 将路由数据存到一个新的pinia里，做菜单渲染
      if (!menuStore.getModel) {
        menuStore.setModel(MODEL["1"]);
      }
      break;
    }
  }
  next({ ...to, replace: true }); // 等待addRoute执行完毕跳转路由
}

function filterAsyncRouter(asyncRouterMap) {
  // 遍历后台传来的路由字符串，转换为组件对象
  return asyncRouterMap.filter((route) => {
    route.meta = JSON.parse(route.meta);
    if (route.component) {
      if (route.component === "children") {
        route.component = children;
      } else {
        route.component = modules[`./views/${route.component}.vue`];
      }
    }
    // 如果存在children递归
    if (route.children && route.children.length) {
      route.children = filterAsyncRouter(route.children);
    }
    return true;
  });
}