import { Router, isNavigationFailure } from 'vue-router'; import type { RouteRecordRaw } from 'vue-router'; import { loginCheck } from '@/utils/router'; import { useUser } from '@/store/modules/user'; import { useAsyncRoute } from '@/store/modules/asyncRoute'; import { PageEnum } from '@/enums/pageEnum'; import { ErrorPageRoute } from '@/router/base'; import { useProjectSetting } from '@/store/modules/projectSetting'; const LOGIN_PATH = PageEnum.BASE_LOGIN; const whitePathList = [LOGIN_PATH]; // 没有重定向白名单 export async function createRouterGuards(router: Router) { const userStore = useUser(); const asyncRouteStore = useAsyncRoute(); const useProjectSettingStore = useProjectSetting(); // 前置; router.beforeEach(async (to, from, next) => { const Loading = window['$loading'] || null; Loading && Loading.start(); if (from.path === LOGIN_PATH && to.name === 'errorPage') { next(PageEnum.BASE_HOME); return; } if (whitePathList.includes(to.path as PageEnum)) { next(); return; } if (!loginCheck()) { // 不需要登录鉴权的路由 if (to.meta.ignoreAuth) { next(); return; } // 重定向到登录页 const redirectData: { path: string; replace: boolean; query?: Recordable; } = { path: LOGIN_PATH, replace: true, }; if (to.path) { redirectData.query = { ...redirectData.query, redirect: to.path, }; } next(redirectData); return; } if (asyncRouteStore.getIsDynamicRouteAdded) { next(); return; } try { await userStore.getInfo(); await useProjectSettingStore.setProjectSetting(); const routes = await asyncRouteStore.generateRoutes(); // 动态添加可访问路由表 routes.forEach((item: unknown) => { router.addRoute(item as unknown as RouteRecordRaw); }); } catch (error) { next(LOGIN_PATH); } //添加404 const isErrorPage = router .getRoutes() .findIndex((item) => item.name === ErrorPageRoute.name); if (isErrorPage === -1) { router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw); } const redirectPath = (from.query.redirect || to.path) as string; const redirect = decodeURIComponent(redirectPath); const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }; asyncRouteStore.setDynamicRouteAdded(true); next(nextData); Loading && Loading.finish(); }); router.afterEach((to, _, failure) => { document.title = (to?.meta?.title as string) || document.title; if (isNavigationFailure(failure)) { console.log('导航失败', failure); } const asyncRouteStore = useAsyncRoute(); // 在这里设置需要缓存的组件名称 const keepAliveComponents = asyncRouteStore.keepAliveComponents; const currentComName: any = to.matched.find( (item) => item.name == to.name )?.name; if ( currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive ) { // 需要缓存的组件 keepAliveComponents.push(currentComName); } else if (!to.meta?.keepAlive || to.name == 'Redirect') { // 不需要缓存的组件 const index = asyncRouteStore.keepAliveComponents.findIndex( (name) => name == currentComName ); if (index != -1) { keepAliveComponents.splice(index, 1); } } asyncRouteStore.setKeepAliveComponents(keepAliveComponents); const Loading = window['$loading'] || null; Loading && Loading.finish(); }); router.onError((error) => { console.log(error, '路由错误'); }); }