import { createRouter, createWebHashHistory } from "vue-router"; import { Global3DStore } from "@/stores"; import { AuthStore } from "@/stores/modules/auth"; import { LOGIN_URL, ROUTER_WHITE_LIST } from "@/config/config"; import { initDynamicRouter } from "@/routers/modules/dynamicRouter"; import { staticRouter, errorRouter } from "@/routers/modules/staticRouter"; import NProgress from "@/config/nprogress"; import { HOME_URL } from "@/enums/Home"; import { loginOutsideApi } from "@/api/modules/login"; import { TabsStore } from "@/stores/modules/tabs"; import { KeepAliveStore } from "@/stores/modules/keepAlive"; // import path from "path"; /** * @description 动态路由参数配置简介 📚 * @param path ==> 菜单路径 * @param name ==> 菜单别名 * @param redirect ==> 重定向地址 * @param component ==> 视图文件路径 * @param meta ==> 菜单信息 * @param meta.icon ==> 菜单图标 * @param meta.title ==> 菜单标题 * @param meta.activeMenu ==> 当前路由为详情页时,需要高亮的菜单 * @param meta.isLink ==> 是否外链 * @param meta.isHide ==> 是否隐藏 * @param meta.isFull ==> 是否全屏(示例:数据大屏页面) * @param meta.isAffix ==> 是否固定在 tabs nav * @param meta.isKeepAlive ==> 是否缓存 * */ const router = createRouter({ history: createWebHashHistory(), routes: [...staticRouter, ...errorRouter], strict: false, scrollBehavior: () => ({ left: 0, top: 0 }) }); /** * @description 路由拦截 beforeEach * */ router.beforeEach(async (to, from, next) => { const globalStore = Global3DStore(); // 1.NProgress 开始 NProgress.start(); // 2.动态设置标题 const title = import.meta.env.VITE_GLOB_APP_TITLE; // document.title = to.meta.title ? `${to.meta.title} - ${title}` : title; document.title = to.meta.title ? `${to.meta.title} ` : title; // 附加.判断是否特殊进入,是的话则默认登录 if (to.query.projectId) { await defaultLogin(to.query.projectId); } // 3.判断是访问登陆页,有 Token 就在当前页面,没有 Token 重置路由并放行到登陆页 if (to.path === LOGIN_URL) { if (globalStore.token) return next(from.fullPath); resetRouter(); return next(); } // 4.判断访问页面是否在路由白名单地址中,如果存在直接放行 if (ROUTER_WHITE_LIST.includes(to.path)) return next(); // 5.判断是否有 Token,没有重定向到 login if (!globalStore.token) return next({ path: LOGIN_URL, replace: true }); // 6.如果没有菜单列表,就重新请求菜单列表并添加动态路由 const authStore = AuthStore(); authStore.setRouteName(to.name as string); if (!authStore.authMenuListGet.length) { await initDynamicRouter(); if (globalStore.accountType && globalStore.accountType !== 1 && to.fullPath === HOME_URL[0]) { next(HOME_URL[globalStore.accountType - 1]); } return next({ ...to, replace: true }); } // 7.正常访问页面 next(); }); /** * @description 特殊路由自动登录 * */ export const defaultLogin = async (id: any) => { const { result } = await loginOutsideApi({ projectId: id }); const globalStore = Global3DStore(); const tabsStore = TabsStore(); const keepAlive = KeepAliveStore(); console.log(result); globalStore.setUserInfo(result); globalStore.setToken(result.token); globalStore.setAccount(result.account); globalStore.setAccountType(result.accountType); globalStore.setProjectDateAuth(result.projectDateAuth); globalStore.setIsManager(result.isManager); //我已知晓 // 2.添加动态路由 // await initDynamicRouter(); // router.push(arr[result.accountType - 1]); // 3.清空 tabs、keepAlive 保留的数据 tabsStore.closeMultipleTab(); keepAlive.setKeepAliveName(); }; /** * @description 重置路由 * */ export const resetRouter = () => { const authStore = AuthStore(); authStore.flatMenuListGet.forEach(route => { const { name } = route; if (name && router.hasRoute(name)) router.removeRoute(name); }); }; /** * @description 路由跳转结束 * */ router.afterEach(() => { NProgress.done(); }); /** * @description 路由跳转错误 * */ router.onError(error => { NProgress.done(); console.warn("路由错误", error.message); }); export default router;