93 lines
3.2 KiB
JavaScript
93 lines
3.2 KiB
JavaScript
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 = resData.routeList.filter((item) => item.hasMenu); // 后台请求得到的路由数据
|
||
// 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;
|
||
});
|
||
}
|