Commit 237e65eac909368c4b4857da6c8deb1dc18e7684

Authored by 无木
1 parent 6350224a

fix: resolving `Vue Router warn`

移除因为动态加载路由而产生的vue-router警告
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);