131 lines
3.7 KiB
TypeScript
131 lines
3.7 KiB
TypeScript
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';
|
|
import { getUserStyleSetting } from '@/api/system/user';
|
|
|
|
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<string>;
|
|
} = {
|
|
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();
|
|
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, '路由错误');
|
|
});
|
|
}
|