113 lines
3.9 KiB
Plaintext
113 lines
3.9 KiB
Plaintext
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<string> } = {
|
|
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();
|
|
});
|
|
}
|