import type { RouteRecordRaw } from 'vue-router'; import { isNavigationFailure, Router } from 'vue-router'; import { useUserStoreWidthOut } from '@/store/modules/user'; import { useAsyncRouteStoreWidthOut } from '@/store/modules/asyncRoute'; import { ACCESS_TOKEN,FIRST_ROUTE } from '@/store/mutation-types'; import { storage } from '@/utils/Storage'; import { PageEnum } from '@/enums/pageEnum'; import { ErrorPageRoute } from '@/router/base'; import { findFirstRoutePath } from '@/router/generator-routers'; import {findTreeByPath} from "@/utils/auth"; const LOGIN_PATH = PageEnum.BASE_LOGIN; const whitePathList = [LOGIN_PATH]; // no redirect whitelist export function createRouterGuards(router: Router) { const userStore = useUserStoreWidthOut(); const asyncRouteStore = useAsyncRouteStoreWidthOut(); router.beforeEach(async (to, from, next) => { const $loadingBar = window['$loadingBar']; $loadingBar && $loadingBar.start(); // Whitelist can be directly entered if (whitePathList.includes(to.path as PageEnum)) { next(); return; } const token = storage.get(ACCESS_TOKEN); if (!token) { // You can access without permissions. You need to set the routing meta.ignoreAuth to true if (to.meta.ignoreAuth) { next(); return; } // redirect login page 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.getIsDynamicAddedRoute) { next(); return; } const userInfo = await userStore.GetInfo(); const routes = await asyncRouteStore.generateRoutes(userInfo); // 动态添加可访问路由表 routes.forEach((item) => { router.addRoute(item as unknown as RouteRecordRaw); }); //添加404 const isErrorPage = router.getRoutes().findIndex((item) => item.name === ErrorPageRoute.name); if (isErrorPage === -1) { router.addRoute(ErrorPageRoute as unknown as RouteRecordRaw); } const firstRoutePath = findFirstRoutePath(routes) storage.set(FIRST_ROUTE,firstRoutePath) if (from.path === LOGIN_PATH && (to.name === 'errorPage' || !to.name)) { next(firstRoutePath); return; } let formPath = findTreeByPath(routes,from.query.redirect).length > 0 ? from.query.redirect:to.path const redirectPath = (formPath) as string; const redirect = decodeURIComponent(redirectPath); const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }; asyncRouteStore.setDynamicAddedRoute(true); next(nextData); $loadingBar && $loadingBar.finish(); }); router.afterEach((to, _, failure) => { const $loadingBar = window['$loadingBar']; document.title = (to?.meta?.documentTitle ? to?.meta?.documentTitle : (to?.meta?.title as string)) || document.title; if (isNavigationFailure(failure)) { //console.log('failed navigation', failure) } const asyncRouteStore = useAsyncRouteStoreWidthOut(); // 在这里设置需要缓存的组件名称 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); $loadingBar && $loadingBar.finish(); }); }