Commit 237e65eac909368c4b4857da6c8deb1dc18e7684
1 parent
6350224a
fix: resolving `Vue Router warn`
移除因为动态加载路由而产生的vue-router警告
Showing
6 changed files
with
56 additions
and
25 deletions
CHANGELOG.zh_CN.md
@@ -22,11 +22,12 @@ | @@ -22,11 +22,12 @@ | ||
22 | - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由 | 22 | - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由 |
23 | - **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题 | 23 | - **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题 |
24 | - **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题 | 24 | - **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题 |
25 | +- **Modal** 确保 props 正确被传递 | ||
25 | - **其它** | 26 | - **其它** |
26 | - 修复菜单默认折叠的配置不起作用的问题 | 27 | - 修复菜单默认折叠的配置不起作用的问题 |
27 | - 修复`safari`浏览器报错导致网站打不开 | 28 | - 修复`safari`浏览器报错导致网站打不开 |
28 | - 修复在 window 上,拉取代码后 eslint 因 endOfLine 而保错问题 | 29 | - 修复在 window 上,拉取代码后 eslint 因 endOfLine 而保错问题 |
29 | -- **Modal** 确保 props 正确被传递 | 30 | + - 修复因动态路由而产生的 `Vue Router warn` |
30 | 31 | ||
31 | ### 🎫 Chores | 32 | ### 🎫 Chores |
32 | 33 |
src/router/constant.ts
@@ -2,6 +2,8 @@ export const REDIRECT_NAME = 'Redirect'; | @@ -2,6 +2,8 @@ export const REDIRECT_NAME = 'Redirect'; | ||
2 | 2 | ||
3 | export const PARENT_LAYOUT_NAME = 'ParentLayout'; | 3 | export const PARENT_LAYOUT_NAME = 'ParentLayout'; |
4 | 4 | ||
5 | +export const PAGE_NOT_FOUND_NAME = 'PageNotFound'; | ||
6 | + | ||
5 | export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue'); | 7 | export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue'); |
6 | 8 | ||
7 | /** | 9 | /** |
src/router/guard/permissionGuard.ts
@@ -8,6 +8,7 @@ import { useUserStoreWithOut } from '/@/store/modules/user'; | @@ -8,6 +8,7 @@ import { useUserStoreWithOut } from '/@/store/modules/user'; | ||
8 | import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'; | 8 | import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic'; |
9 | 9 | ||
10 | import { RootRoute } from '/@/router/routes'; | 10 | import { RootRoute } from '/@/router/routes'; |
11 | +import { omit } from 'lodash-es'; | ||
11 | 12 | ||
12 | const LOGIN_PATH = PageEnum.BASE_LOGIN; | 13 | const LOGIN_PATH = PageEnum.BASE_LOGIN; |
13 | 14 | ||
@@ -18,26 +19,20 @@ const whitePathList: PageEnum[] = [LOGIN_PATH]; | @@ -18,26 +19,20 @@ const whitePathList: PageEnum[] = [LOGIN_PATH]; | ||
18 | export function createPermissionGuard(router: Router) { | 19 | export function createPermissionGuard(router: Router) { |
19 | const userStore = useUserStoreWithOut(); | 20 | const userStore = useUserStoreWithOut(); |
20 | const permissionStore = usePermissionStoreWithOut(); | 21 | const permissionStore = usePermissionStoreWithOut(); |
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 | - | 22 | + router.beforeEach(async (to, from) => { |
28 | if ( | 23 | if ( |
29 | from.path === ROOT_PATH && | 24 | from.path === ROOT_PATH && |
30 | to.path === PageEnum.BASE_HOME && | 25 | to.path === PageEnum.BASE_HOME && |
31 | userStore.getUserInfo.homePath && | 26 | userStore.getUserInfo.homePath && |
32 | userStore.getUserInfo.homePath !== PageEnum.BASE_HOME | 27 | userStore.getUserInfo.homePath !== PageEnum.BASE_HOME |
33 | ) { | 28 | ) { |
34 | - next(userStore.getUserInfo.homePath); | ||
35 | - return; | 29 | + // next(userStore.getUserInfo.homePath); |
30 | + return userStore.getUserInfo.homePath; | ||
36 | } | 31 | } |
37 | 32 | ||
38 | // Whitelist can be directly entered | 33 | // Whitelist can be directly entered |
39 | if (whitePathList.includes(to.path as PageEnum)) { | 34 | if (whitePathList.includes(to.path as PageEnum)) { |
40 | - next(); | 35 | + // next(); |
41 | return; | 36 | return; |
42 | } | 37 | } |
43 | 38 | ||
@@ -47,7 +42,7 @@ export function createPermissionGuard(router: Router) { | @@ -47,7 +42,7 @@ export function createPermissionGuard(router: Router) { | ||
47 | if (!token) { | 42 | if (!token) { |
48 | // You can access without permission. You need to set the routing meta.ignoreAuth to true | 43 | // You can access without permission. You need to set the routing meta.ignoreAuth to true |
49 | if (to.meta.ignoreAuth) { | 44 | if (to.meta.ignoreAuth) { |
50 | - next(); | 45 | + // next(); |
51 | return; | 46 | return; |
52 | } | 47 | } |
53 | 48 | ||
@@ -62,12 +57,18 @@ export function createPermissionGuard(router: Router) { | @@ -62,12 +57,18 @@ export function createPermissionGuard(router: Router) { | ||
62 | redirect: to.path, | 57 | redirect: to.path, |
63 | }; | 58 | }; |
64 | } | 59 | } |
65 | - next(redirectData); | ||
66 | - return; | 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; | ||
67 | } | 68 | } |
68 | 69 | ||
69 | if (permissionStore.getIsDynamicAddedRoute) { | 70 | if (permissionStore.getIsDynamicAddedRoute) { |
70 | - next(); | 71 | + // next(); |
71 | return; | 72 | return; |
72 | } | 73 | } |
73 | 74 | ||
@@ -79,8 +80,12 @@ export function createPermissionGuard(router: Router) { | @@ -79,8 +80,12 @@ export function createPermissionGuard(router: Router) { | ||
79 | 80 | ||
80 | const redirectPath = (from.query.redirect || to.path) as string; | 81 | const redirectPath = (from.query.redirect || to.path) as string; |
81 | const redirect = decodeURIComponent(redirectPath); | 82 | const redirect = decodeURIComponent(redirectPath); |
82 | - const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }; | 83 | + const nextData = |
84 | + to.path === redirect | ||
85 | + ? { ...omit(to, ['name', 'params']), replace: true } | ||
86 | + : { path: redirect }; | ||
83 | permissionStore.setDynamicAddedRoute(true); | 87 | permissionStore.setDynamicAddedRoute(true); |
84 | - next(nextData); | 88 | + // next(nextData); |
89 | + return nextData; | ||
85 | }); | 90 | }); |
86 | } | 91 | } |
src/router/routes/basic.ts
1 | import type { AppRouteRecordRaw } from '/@/router/types'; | 1 | import type { AppRouteRecordRaw } from '/@/router/types'; |
2 | import { t } from '/@/hooks/web/useI18n'; | 2 | import { t } from '/@/hooks/web/useI18n'; |
3 | -import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant'; | 3 | +import { |
4 | + REDIRECT_NAME, | ||
5 | + LAYOUT, | ||
6 | + EXCEPTION_COMPONENT, | ||
7 | + PAGE_NOT_FOUND_NAME, | ||
8 | +} from '/@/router/constant'; | ||
4 | 9 | ||
5 | // 404 on a page | 10 | // 404 on a page |
6 | export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { | 11 | export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { |
7 | path: '/:path(.*)*', | 12 | path: '/:path(.*)*', |
8 | - name: 'ErrorPage', | 13 | + name: PAGE_NOT_FOUND_NAME, |
9 | component: LAYOUT, | 14 | component: LAYOUT, |
10 | meta: { | 15 | meta: { |
11 | title: 'ErrorPage', | 16 | title: 'ErrorPage', |
@@ -15,11 +20,12 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { | @@ -15,11 +20,12 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = { | ||
15 | children: [ | 20 | children: [ |
16 | { | 21 | { |
17 | path: '/:path(.*)*', | 22 | path: '/:path(.*)*', |
18 | - name: 'ErrorPage', | 23 | + name: PAGE_NOT_FOUND_NAME, |
19 | component: EXCEPTION_COMPONENT, | 24 | component: EXCEPTION_COMPONENT, |
20 | meta: { | 25 | meta: { |
21 | title: 'ErrorPage', | 26 | title: 'ErrorPage', |
22 | hideBreadcrumb: true, | 27 | hideBreadcrumb: true, |
28 | + hideMenu: true, | ||
23 | }, | 29 | }, |
24 | }, | 30 | }, |
25 | ], | 31 | ], |
src/router/routes/index.ts
@@ -37,4 +37,10 @@ export const LoginRoute: AppRouteRecordRaw = { | @@ -37,4 +37,10 @@ export const LoginRoute: AppRouteRecordRaw = { | ||
37 | }; | 37 | }; |
38 | 38 | ||
39 | // Basic routing without permission | 39 | // Basic routing without permission |
40 | -export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE]; | 40 | +export const basicRoutes = [ |
41 | + LoginRoute, | ||
42 | + RootRoute, | ||
43 | + ...mainOutRoutes, | ||
44 | + REDIRECT_ROUTE, | ||
45 | + PAGE_NOT_FOUND_ROUTE, | ||
46 | +]; |
src/store/modules/user.ts
@@ -11,6 +11,8 @@ import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user'; | @@ -11,6 +11,8 @@ import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user'; | ||
11 | import { useI18n } from '/@/hooks/web/useI18n'; | 11 | import { useI18n } from '/@/hooks/web/useI18n'; |
12 | import { useMessage } from '/@/hooks/web/useMessage'; | 12 | import { useMessage } from '/@/hooks/web/useMessage'; |
13 | import { router } from '/@/router'; | 13 | import { router } from '/@/router'; |
14 | +import { usePermissionStore } from '/@/store/modules/permission'; | ||
15 | +import { RouteRecordRaw } from 'vue-router'; | ||
14 | 16 | ||
15 | interface UserState { | 17 | interface UserState { |
16 | userInfo: Nullable<UserInfo>; | 18 | userInfo: Nullable<UserInfo>; |
@@ -87,10 +89,19 @@ export const useUserStore = defineStore({ | @@ -87,10 +89,19 @@ export const useUserStore = defineStore({ | ||
87 | const userInfo = await this.getUserInfoAction(); | 89 | const userInfo = await this.getUserInfoAction(); |
88 | 90 | ||
89 | const sessionTimeout = this.sessionTimeout; | 91 | const sessionTimeout = this.sessionTimeout; |
90 | - sessionTimeout && this.setSessionTimeout(false); | ||
91 | - !sessionTimeout && | ||
92 | - goHome && | ||
93 | - (await router.replace(userInfo.homePath || PageEnum.BASE_HOME)); | 92 | + if (sessionTimeout) { |
93 | + this.setSessionTimeout(false); | ||
94 | + } else if (goHome) { | ||
95 | + const permissionStore = usePermissionStore(); | ||
96 | + if (!permissionStore.isDynamicAddedRoute) { | ||
97 | + const routes = await permissionStore.buildRoutesAction(); | ||
98 | + routes.forEach((route) => { | ||
99 | + router.addRoute(route as unknown as RouteRecordRaw); | ||
100 | + }); | ||
101 | + permissionStore.setDynamicAddedRoute(true); | ||
102 | + } | ||
103 | + await router.replace(userInfo.homePath || PageEnum.BASE_HOME); | ||
104 | + } | ||
94 | return userInfo; | 105 | return userInfo; |
95 | } catch (error) { | 106 | } catch (error) { |
96 | return Promise.reject(error); | 107 | return Promise.reject(error); |