fix: ensure PAGE_NOT_FOUND_ROUTE exist

修复某些情况下404路由可能白屏的问题
vbenjs · Jul 14, 2021 · 87583c8 · 87583c8
1 parent 1e63379
commit 87583c8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts
@@ -8,7 +8,6 @@ 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;
 
@@ -19,20 +18,26 @@ const whitePathList: PageEnum[] = [LOGIN_PATH];
 export function createPermissionGuard(router: Router) {
   const userStore = useUserStoreWithOut();
   const permissionStore = usePermissionStoreWithOut();
-  router.beforeEach(async (to, from) => {
+  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;
+    }
+
     if (
       from.path === ROOT_PATH &&
       to.path === PageEnum.BASE_HOME &&
       userStore.getUserInfo.homePath &&
       userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
     ) {
-      // next(userStore.getUserInfo.homePath);
-      return userStore.getUserInfo.homePath;
+      next(userStore.getUserInfo.homePath);
+      return;
     }
 
     // Whitelist can be directly entered
     if (whitePathList.includes(to.path as PageEnum)) {
-      // next();
+      next();
       return;
     }
 
@@ -42,7 +47,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;
       }
 
@@ -57,18 +62,12 @@ export function createPermissionGuard(router: Router) {
           redirect: to.path,
         };
       }
-      //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;
+      next(redirectData);
+      return;
     }
 
     if (permissionStore.getIsDynamicAddedRoute) {
-      // next();
+      next();
       return;
     }
 
@@ -78,14 +77,18 @@ export function createPermissionGuard(router: Router) {
       router.addRoute(route as unknown as RouteRecordRaw);
     });
 
-    const redirectPath = (from.query.redirect || to.path) as string;
-    const redirect = decodeURIComponent(redirectPath);
-    const nextData =
-      to.path === redirect
-        ? { ...omit(to, ['name', 'params']), replace: true }
-        : { path: redirect };
+    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+
     permissionStore.setDynamicAddedRoute(true);
-    // next(nextData);
-    return nextData;
+
+    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true });
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string;
+      const redirect = decodeURIComponent(redirectPath);
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+      next(nextData);
+    }
   });
 }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -13,6 +13,7 @@ import { useMessage } from '/@/hooks/web/useMessage';
 import { router } from '/@/router';
 import { usePermissionStore } from '/@/store/modules/permission';
 import { RouteRecordRaw } from 'vue-router';
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';
 
 interface UserState {
   userInfo: Nullable<UserInfo>;
@@ -98,6 +99,7 @@ export const useUserStore = defineStore({
             routes.forEach((route) => {
               router.addRoute(route as unknown as RouteRecordRaw);
             });
+            router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
             permissionStore.setDynamicAddedRoute(true);
           }
           await router.replace(userInfo.homePath || PageEnum.BASE_HOME);