Commit 87583c8b54d335ddf1c416859ef62bbde189c809
1 parent
1e633790
fix: ensure PAGE_NOT_FOUND_ROUTE exist
修复某些情况下404路由可能白屏的问题
Showing
2 changed files
with
28 additions
and
23 deletions
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); | ... | ... |