fix: ensure PAGE_NOT_FOUND_ROUTE exist

修复某些情况下404路由可能白屏的问题
This commit is contained in:
无木 2021-07-14 21:37:10 +08:00
parent 1e63379088
commit 87583c8b54
2 changed files with 28 additions and 23 deletions

View File

@ -8,7 +8,6 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'; import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
import { RootRoute } from '/@/router/routes'; import { RootRoute } from '/@/router/routes';
import { omit } from 'lodash-es';
const LOGIN_PATH = PageEnum.BASE_LOGIN; const LOGIN_PATH = PageEnum.BASE_LOGIN;
@ -19,20 +18,26 @@ const whitePathList: PageEnum[] = [LOGIN_PATH];
export function createPermissionGuard(router: Router) { export function createPermissionGuard(router: Router) {
const userStore = useUserStoreWithOut(); const userStore = useUserStoreWithOut();
const permissionStore = usePermissionStoreWithOut(); const permissionStore = usePermissionStoreWithOut();
router.beforeEach(async (to, from) => { router.beforeEach(async (to, from, next) => {
// Jump to the 404 page after processing the login
if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
return;
}
if ( if (
from.path === ROOT_PATH && from.path === ROOT_PATH &&
to.path === PageEnum.BASE_HOME && to.path === PageEnum.BASE_HOME &&
userStore.getUserInfo.homePath && userStore.getUserInfo.homePath &&
userStore.getUserInfo.homePath !== PageEnum.BASE_HOME userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
) { ) {
// next(userStore.getUserInfo.homePath); next(userStore.getUserInfo.homePath);
return userStore.getUserInfo.homePath; return;
} }
// Whitelist can be directly entered // Whitelist can be directly entered
if (whitePathList.includes(to.path as PageEnum)) { if (whitePathList.includes(to.path as PageEnum)) {
// next(); next();
return; return;
} }
@ -42,7 +47,7 @@ export function createPermissionGuard(router: Router) {
if (!token) { if (!token) {
// You can access without permission. You need to set the routing meta.ignoreAuth to true // You can access without permission. You need to set the routing meta.ignoreAuth to true
if (to.meta.ignoreAuth) { if (to.meta.ignoreAuth) {
// next(); next();
return; return;
} }
@ -57,18 +62,12 @@ export function createPermissionGuard(router: Router) {
redirect: to.path, redirect: to.path,
}; };
} }
//next(redirectData); next(redirectData);
return redirectData; return;
}
// Jump to the 404 page after processing the login
if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
//next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
return userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
} }
if (permissionStore.getIsDynamicAddedRoute) { if (permissionStore.getIsDynamicAddedRoute) {
// next(); next();
return; return;
} }
@ -78,14 +77,18 @@ export function createPermissionGuard(router: Router) {
router.addRoute(route as unknown as RouteRecordRaw); router.addRoute(route as unknown as RouteRecordRaw);
}); });
const redirectPath = (from.query.redirect || to.path) as string; router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
const redirect = decodeURIComponent(redirectPath);
const nextData =
to.path === redirect
? { ...omit(to, ['name', 'params']), replace: true }
: { path: redirect };
permissionStore.setDynamicAddedRoute(true); permissionStore.setDynamicAddedRoute(true);
// next(nextData);
return nextData; if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
// 动态添加路由后此处应当重定向到fullPath否则会加载404页面内容
next({ path: to.fullPath, replace: true });
} else {
const redirectPath = (from.query.redirect || to.path) as string;
const redirect = decodeURIComponent(redirectPath);
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
next(nextData);
}
}); });
} }

View File

@ -13,6 +13,7 @@ import { useMessage } from '/@/hooks/web/useMessage';
import { router } from '/@/router'; import { router } from '/@/router';
import { usePermissionStore } from '/@/store/modules/permission'; import { usePermissionStore } from '/@/store/modules/permission';
import { RouteRecordRaw } from 'vue-router'; import { RouteRecordRaw } from 'vue-router';
import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
interface UserState { interface UserState {
userInfo: Nullable<UserInfo>; userInfo: Nullable<UserInfo>;
@ -98,6 +99,7 @@ export const useUserStore = defineStore({
routes.forEach((route) => { routes.forEach((route) => {
router.addRoute(route as unknown as RouteRecordRaw); router.addRoute(route as unknown as RouteRecordRaw);
}); });
router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
permissionStore.setDynamicAddedRoute(true); permissionStore.setDynamicAddedRoute(true);
} }
await router.replace(userInfo.homePath || PageEnum.BASE_HOME); await router.replace(userInfo.homePath || PageEnum.BASE_HOME);