fix: repair login about redirect query (#3592)

* fix: repair login about redirect query * fix: about buildRoutesAction and redirect * fix: make sure unknown redirect will back to home
vbenjs · Feb 11, 2024 · 236ddf3 · 236ddf3
1 parent e6a7384
commit 236ddf3
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 34 deletions.
diff --git a/src/hooks/web/usePermission.ts b/src/hooks/web/usePermission.ts
@@ -46,10 +46,13 @@ export function usePermission() {
     const tabStore = useMultipleTabStore();
     tabStore.clearCacheTabs();
     resetRouter();
+
+    // 动态加载路由（再次）
     const routes = await permissionStore.buildRoutesAction();
     routes.forEach((route) => {
       router.addRoute(route as unknown as RouteRecordRaw);
     });
+
     permissionStore.setLastBuildMenuTime();
     closeAll();
   }

diff --git a/src/router/guard/permissionGuard.ts b/src/router/guard/permissionGuard.ts
@@ -38,7 +38,7 @@ export function createPermissionGuard(router: Router) {
         try {
           await userStore.afterLoginAction();
           if (!isSessionTimeout) {
-            next((to.query?.redirect as string) || '/');
+            next(decodeURIComponent((to.query?.redirect as string) || '/'));
             return;
           }
         } catch {
@@ -71,16 +71,6 @@ export function createPermissionGuard(router: Router) {
       return;
     }
 
-    // Jump to the 404 page after processing the login
-    if (
-      from.path === LOGIN_PATH &&
-      to.name === PAGE_NOT_FOUND_ROUTE.name &&
-      to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
-    ) {
-      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
-      return;
-    }
-
     // get userinfo while last fetch time is empty
     if (userStore.getLastUpdateTime === 0) {
       try {
@@ -91,29 +81,48 @@ export function createPermissionGuard(router: Router) {
       }
     }
 
-    if (permissionStore.getIsDynamicAddedRoute) {
-      next();
+    // 动态路由加载（首次）
+    if (!permissionStore.getIsDynamicAddedRoute) {
+      const routes = await permissionStore.buildRoutesAction();
+      [...routes, PAGE_NOT_FOUND_ROUTE].forEach((route) => {
+        router.addRoute(route as unknown as RouteRecordRaw);
+      });
+      // 记录动态路由加载完成
+      permissionStore.setDynamicAddedRoute(true);
+
+      // 现在的to动态路由加载之前的，可能为PAGE_NOT_FOUND_ROUTE（例如，登陆后，刷新的时候）
+      // 此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true, query: to.query });
       return;
     }
 
-    const routes = await permissionStore.buildRoutesAction();
-
-    routes.forEach((route) => {
-      router.addRoute(route as unknown as RouteRecordRaw);
-    });
-
-    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
-
-    permissionStore.setDynamicAddedRoute(true);
-
     if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
-      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
-      next({ path: to.fullPath, replace: true, query: to.query });
+      // 遇到不存在页面，后续逻辑不再处理redirect（阻止下面else逻辑）
+      from.query.redirect = '';
+
+      if (
+        from.path === LOGIN_PATH &&
+        to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
+      ) {
+        // 登陆重定向不存在路由，转去“首页”
+        next({ path: userStore.getUserInfo.homePath || PageEnum.BASE_HOME, replace: true });
+      } else {
+        // 正常前往“404”页面
+        next();
+      }
+    } else if (from.query.redirect) {
+      // 存在redirect
+      const redirect = decodeURIComponent((from.query.redirect as string) || '');
+      if (redirect === to.fullPath) {
+        // 已经被redirect
+        next();
+      } else {
+        // 指向redirect
+        next({ path: redirect, 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);
+      // 正常访问
+      next();
     }
   });
 }
diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts
@@ -110,14 +110,17 @@ export const useUserStore = defineStore({
         this.setSessionTimeout(false);
       } else {
         const permissionStore = usePermissionStore();
+
+        // 动态路由加载（首次）
         if (!permissionStore.isDynamicAddedRoute) {
           const routes = await permissionStore.buildRoutesAction();
-          routes.forEach((route) => {
+          [...routes, PAGE_NOT_FOUND_ROUTE].forEach((route) => {
             router.addRoute(route as unknown as RouteRecordRaw);
           });
-          router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+          // 记录动态路由加载完成
           permissionStore.setDynamicAddedRoute(true);
         }
+
         goHome && (await router.replace(userInfo?.homePath || PageEnum.BASE_HOME));
       }
       return userInfo;
@@ -150,7 +153,18 @@ export const useUserStore = defineStore({
       this.setToken(undefined);
       this.setSessionTimeout(false);
       this.setUserInfo(null);
-      goLogin && router.push(PageEnum.BASE_LOGIN);
+      if (goLogin) {
+        // 直接回登陆页
+        router.replace(PageEnum.BASE_LOGIN);
+      } else {
+        // 回登陆页带上当前路由地址
+        router.replace({
+          path: PageEnum.BASE_LOGIN,
+          query: {
+            redirect: encodeURIComponent(router.currentRoute.value.fullPath),
+          },
+        });
+      }
     },
 
     /**
@@ -164,6 +178,7 @@ export const useUserStore = defineStore({
         title: () => h('span', t('sys.app.logoutTip')),
         content: () => h('span', t('sys.app.logoutMessage')),
         onOk: async () => {
+          // 主动登出，不带redirect地址
           await this.logout(true);
         },
       });

diff --git a/src/utils/http/axios/checkStatus.ts b/src/utils/http/axios/checkStatus.ts
@@ -33,7 +33,8 @@ export function checkStatus(
       if (stp === SessionTimeoutProcessingEnum.PAGE_COVERAGE) {
         userStore.setSessionTimeout(true);
       } else {
-        userStore.logout(true);
+        // 被动登出，带redirect地址
+        userStore.logout(false);
       }
       break;
     case 403:

diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts
@@ -77,7 +77,8 @@ const transform: AxiosTransform = {
       case ResultEnum.TIMEOUT:
         timeoutMsg = t('sys.api.timeoutMessage');
         const userStore = useUserStoreWithOut();
-        userStore.logout(true);
+        // 被动登出，带redirect地址
+        userStore.logout(false);
         break;
       default:
         if (message) {

diff --git a/src/views/sys/lock/LockPage.vue b/src/views/sys/lock/LockPage.vue
@@ -124,6 +124,7 @@
   }
 
   function goLogin() {
+    // 主动登出，不带redirect地址
     userStore.logout(true);
     lockStore.resetLockInfo();
   }