Commit 87583c8b54d335ddf1c416859ef62bbde189c809

Authored by 无木
1 parent 1e633790

fix: ensure PAGE_NOT_FOUND_ROUTE exist

修复某些情况下404路由可能白屏的问题
src/router/guard/permissionGuard.ts
... ... @@ -8,7 +8,6 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
8 8 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
9 9  
10 10 import { RootRoute } from '/@/router/routes';
11   -import { omit } from 'lodash-es';
12 11  
13 12 const LOGIN_PATH = PageEnum.BASE_LOGIN;
14 13  
... ... @@ -19,20 +18,26 @@ const whitePathList: PageEnum[] = [LOGIN_PATH];
19 18 export function createPermissionGuard(router: Router) {
20 19 const userStore = useUserStoreWithOut();
21 20 const permissionStore = usePermissionStoreWithOut();
22   - router.beforeEach(async (to, from) => {
  21 + router.beforeEach(async (to, from, next) => {
  22 + // Jump to the 404 page after processing the login
  23 + if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
  24 + next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
  25 + return;
  26 + }
  27 +
23 28 if (
24 29 from.path === ROOT_PATH &&
25 30 to.path === PageEnum.BASE_HOME &&
26 31 userStore.getUserInfo.homePath &&
27 32 userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
28 33 ) {
29   - // next(userStore.getUserInfo.homePath);
30   - return userStore.getUserInfo.homePath;
  34 + next(userStore.getUserInfo.homePath);
  35 + return;
31 36 }
32 37  
33 38 // Whitelist can be directly entered
34 39 if (whitePathList.includes(to.path as PageEnum)) {
35   - // next();
  40 + next();
36 41 return;
37 42 }
38 43  
... ... @@ -42,7 +47,7 @@ export function createPermissionGuard(router: Router) {
42 47 if (!token) {
43 48 // You can access without permission. You need to set the routing meta.ignoreAuth to true
44 49 if (to.meta.ignoreAuth) {
45   - // next();
  50 + next();
46 51 return;
47 52 }
48 53  
... ... @@ -57,18 +62,12 @@ export function createPermissionGuard(router: Router) {
57 62 redirect: to.path,
58 63 };
59 64 }
60   - //next(redirectData);
61   - return redirectData;
62   - }
63   -
64   - // Jump to the 404 page after processing the login
65   - if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
66   - //next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
67   - return userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
  65 + next(redirectData);
  66 + return;
68 67 }
69 68  
70 69 if (permissionStore.getIsDynamicAddedRoute) {
71   - // next();
  70 + next();
72 71 return;
73 72 }
74 73  
... ... @@ -78,14 +77,18 @@ export function createPermissionGuard(router: Router) {
78 77 router.addRoute(route as unknown as RouteRecordRaw);
79 78 });
80 79  
81   - const redirectPath = (from.query.redirect || to.path) as string;
82   - const redirect = decodeURIComponent(redirectPath);
83   - const nextData =
84   - to.path === redirect
85   - ? { ...omit(to, ['name', 'params']), replace: true }
86   - : { path: redirect };
  80 + router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
  81 +
87 82 permissionStore.setDynamicAddedRoute(true);
88   - // next(nextData);
89   - return nextData;
  83 +
  84 + if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
  85 + // 动态添加路由后,此处应当重定向到fullPath,否则会加载404页面内容
  86 + next({ path: to.fullPath, replace: true });
  87 + } else {
  88 + const redirectPath = (from.query.redirect || to.path) as string;
  89 + const redirect = decodeURIComponent(redirectPath);
  90 + const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
  91 + next(nextData);
  92 + }
90 93 });
91 94 }
... ...
src/store/modules/user.ts
... ... @@ -13,6 +13,7 @@ import { useMessage } from '/@/hooks/web/useMessage';
13 13 import { router } from '/@/router';
14 14 import { usePermissionStore } from '/@/store/modules/permission';
15 15 import { RouteRecordRaw } from 'vue-router';
  16 +import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
16 17  
17 18 interface UserState {
18 19 userInfo: Nullable<UserInfo>;
... ... @@ -98,6 +99,7 @@ export const useUserStore = defineStore({
98 99 routes.forEach((route) => {
99 100 router.addRoute(route as unknown as RouteRecordRaw);
100 101 });
  102 + router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
101 103 permissionStore.setDynamicAddedRoute(true);
102 104 }
103 105 await router.replace(userInfo.homePath || PageEnum.BASE_HOME);
... ...