fix: resolving Vue Router warn

移除因为动态加载路由而产生的vue-router警告

Author: mynetfan

CHANGELOG.zh_CN.md

@@ -22,11 +22,12 @@
   - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
 - **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题
 - **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题
+- **Modal** 确保 props 正确被传递
 - **其它**
   - 修复菜单默认折叠的配置不起作用的问题
   - 修复`safari`浏览器报错导致网站打不开
   - 修复在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题
-- **Modal** 确保 props 正确被传递
+  - 修复因动态路由而产生的 `Vue Router warn`
 
 ### 🎫 Chores
 

src/router/constant.ts

@@ -2,6 +2,8 @@ export const REDIRECT_NAME = 'Redirect';
 
 export const PARENT_LAYOUT_NAME = 'ParentLayout';
 
+export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
+
 export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');
 
 /**

src/router/guard/permissionGuard.ts

@@ -8,6 +8,7 @@ import { useUserStoreWithOut } from '/@/store/modules/user';
 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 
 import { RootRoute } from '/@/router/routes';
+import { omit } from 'lodash-es';
 
 const LOGIN_PATH = PageEnum.BASE_LOGIN;
 
@@ -18,26 +19,20 @@ const whitePathList: PageEnum[] = [LOGIN_PATH];
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
-  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;
-    }
-
+  router.beforeEach(async (to, from) => {
     if (
       from.path === ROOT_PATH &&
       to.path === PageEnum.BASE_HOME &&
       userStore.getUserInfo.homePath &&
       userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
     ) {
-      next(userStore.getUserInfo.homePath);
-      return;
+      // next(userStore.getUserInfo.homePath);
+      return userStore.getUserInfo.homePath;
     }
 
     // Whitelist can be directly entered
     if (whitePathList.includes(to.path as PageEnum)) {
-      next();
+      // next();
       return;
     }
 
@@ -47,7 +42,7 @@ export function createPermissionGuard(router: Router) {
     if (!token) {
       // You can access without permission. You need to set the routing meta.ignoreAuth to true
       if (to.meta.ignoreAuth) {
-        next();
+        // next();
         return;
       }
 
@@ -62,12 +57,18 @@ export function createPermissionGuard(router: Router) {
           redirect: to.path,
         };
       }
-      next(redirectData);
-      return;
+      //next(redirectData);
+      return redirectData;
+    }
+
+    // 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) {
-      next();
+      // next();
       return;
     }
 
@@ -79,8 +80,12 @@ export function createPermissionGuard(router: Router) {
 
     const redirectPath = (from.query.redirect || to.path) as string;
     const redirect = decodeURIComponent(redirectPath);
-    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    const nextData =
+      to.path === redirect
+        ? { ...omit(to, ['name', 'params']), replace: true }
+        : { path: redirect };
     permissionStore.setDynamicAddedRoute(true);
-    next(nextData);
+    // next(nextData);
+    return nextData;
   });
 }

src/router/routes/basic.ts

@@ -1,11 +1,16 @@
 import type { AppRouteRecordRaw } from '/@/router/types';
 import { t } from '/@/hooks/web/useI18n';
-import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
+import {
+  REDIRECT_NAME,
+  LAYOUT,
+  EXCEPTION_COMPONENT,
+  PAGE_NOT_FOUND_NAME,
+} from '/@/router/constant';
 
 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
   path: '/:path(.*)*',
-  name: 'ErrorPage',
+  name: PAGE_NOT_FOUND_NAME,
   component: LAYOUT,
   meta: {
     title: 'ErrorPage',
@@ -15,11 +20,12 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
   children: [
     {
       path: '/:path(.*)*',
-      name: 'ErrorPage',
+      name: PAGE_NOT_FOUND_NAME,
       component: EXCEPTION_COMPONENT,
       meta: {
         title: 'ErrorPage',
         hideBreadcrumb: true,
+        hideMenu: true,
       },
     },
   ],

src/router/routes/index.ts

@@ -37,4 +37,10 @@ export const LoginRoute: AppRouteRecordRaw = {
 };
 
 // Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE];
+export const basicRoutes = [
+  LoginRoute,
+  RootRoute,
+  ...mainOutRoutes,
+  REDIRECT_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+];

src/store/modules/user.ts

@@ -11,6 +11,8 @@ import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { router } from '/@/router';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -87,10 +89,19 @@ export const useUserStore = defineStore({
         const userInfo = await this.getUserInfoAction();
 
         const sessionTimeout = this.sessionTimeout;
-        sessionTimeout && this.setSessionTimeout(false);
-        !sessionTimeout &&
-          goHome &&
-          (await router.replace(userInfo.homePath || PageEnum.BASE_HOME));
+        if (sessionTimeout) {
+          this.setSessionTimeout(false);
+        } else if (goHome) {
+          const permissionStore = usePermissionStore();
+          if (!permissionStore.isDynamicAddedRoute) {
+            const routes = await permissionStore.buildRoutesAction();
+            routes.forEach((route) => {
+              router.addRoute(route as unknown as RouteRecordRaw);
+            });
+            permissionStore.setDynamicAddedRoute(true);
+          }
+          await router.replace(userInfo.homePath || PageEnum.BASE_HOME);
+        }
         return userInfo;
       } catch (error) {
         return Promise.reject(error);