From b37ec04c8778b7514f37573f832c5d9a8be2bac8 Mon Sep 17 00:00:00 2001
From: Ryan Wang <i@ryanc.cc>
Date: Wed, 31 May 2023 14:55:01 +0800
Subject: [PATCH] perf: improve the experience of redirection after login
 (#4014)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#### What type of PR is this?

/area console
/kind improvement
/milestone 2.6.x

#### What this PR does / why we need it:

优化 Console 端登录之后重定向的体验，解决在重定向时会重新显示登录页面的问题。

#### Which issue(s) this PR fixes:

Fixes #4010

#### Special notes for your reviewer:

测试方式与 https://github.com/halo-dev/halo/pull/3989 相同。

#### Does this PR introduce a user-facing change?

```release-note
None
```
---
 console/src/modules/system/users/Login.vue | 44 +---------------------
 console/src/router/guards/auth-check.ts    | 27 ++++++++++---
 console/src/router/routes.config.ts        |  6 +++
 console/src/views/system/Redirect.vue      | 41 ++++++++++++++++++++
 4 files changed, 70 insertions(+), 48 deletions(-)
 create mode 100644 console/src/views/system/Redirect.vue

diff --git a/console/src/modules/system/users/Login.vue b/console/src/modules/system/users/Login.vue
index 5e4432882..1316baba8 100644
--- a/console/src/modules/system/users/Login.vue
+++ b/console/src/modules/system/users/Login.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import { onBeforeMount, computed, watch } from "vue";
-import router from "@/router";
+import { computed, watch } from "vue";
 import IconLogo from "~icons/core/logo?width=5rem&height=2rem";
-import { useUserStore } from "@/stores/user";
 import LoginForm from "@/components/login/LoginForm.vue";
 import { useRouteQuery } from "@vueuse/router";
 import SignupForm from "@/components/signup/SignupForm.vue";
@@ -14,52 +12,12 @@ import { AppName } from "@/constants/app";
 import { locales, getBrowserLanguage, i18n } from "@/locales";
 import MdiTranslate from "~icons/mdi/translate";
 import { useLocalStorage } from "@vueuse/core";
-import { useRoute } from "vue-router";
 
-const route = useRoute();
-const userStore = useUserStore();
 const { globalInfo } = useGlobalInfoFetch();
 const { t } = useI18n();
 
 const SIGNUP_TYPE = "signup";
 
-onBeforeMount(() => {
-  if (userStore.isAnonymous) {
-    return;
-  }
-
-  if (allowRedirect()) {
-    window.location.href = route.query.redirect_uri as string;
-    return;
-  }
-
-  router.push({ name: "Dashboard" });
-});
-
-function allowRedirect() {
-  const redirect_uri = route.query.redirect_uri as string;
-
-  if (!redirect_uri || redirect_uri === window.location.href) {
-    return false;
-  }
-
-  if (redirect_uri.startsWith("/")) {
-    return true;
-  }
-
-  if (
-    redirect_uri.startsWith("https://") ||
-    redirect_uri.startsWith("http://")
-  ) {
-    const url = new URL(redirect_uri);
-    if (url.origin === window.location.origin) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
 function onLoginSucceed() {
   window.location.reload();
 }
diff --git a/console/src/router/guards/auth-check.ts b/console/src/router/guards/auth-check.ts
index bf3ae3753..e7d118ed3 100644
--- a/console/src/router/guards/auth-check.ts
+++ b/console/src/router/guards/auth-check.ts
@@ -5,14 +5,14 @@ const whiteList = ["Setup", "Login", "Binding"];
 
 export function setupAuthCheckGuard(router: Router) {
   router.beforeEach((to, from, next) => {
-    if (whiteList.includes(to.name as string)) {
-      next();
-      return;
-    }
-
     const userStore = useUserStore();
 
     if (userStore.isAnonymous) {
+      if (whiteList.includes(to.name as string)) {
+        next();
+        return;
+      }
+
       next({
         name: "Login",
         query: {
@@ -20,7 +20,24 @@ export function setupAuthCheckGuard(router: Router) {
         },
       });
       return;
+    } else {
+      if (to.name === "Login") {
+        if (to.query.redirect_uri) {
+          next({
+            name: "Redirect",
+            query: {
+              redirect_uri: to.query.redirect_uri,
+            },
+          });
+        } else {
+          next({
+            name: "Dashboard",
+          });
+          return;
+        }
+      }
     }
+
     next();
   });
 }
diff --git a/console/src/router/routes.config.ts b/console/src/router/routes.config.ts
index 7e8a7b53a..1af7f09bf 100644
--- a/console/src/router/routes.config.ts
+++ b/console/src/router/routes.config.ts
@@ -3,6 +3,7 @@ import NotFound from "@/views/exceptions/NotFound.vue";
 import Forbidden from "@/views/exceptions/Forbidden.vue";
 import BasicLayout from "@/layouts/BasicLayout.vue";
 import Setup from "@/views/system/Setup.vue";
+import Redirect from "@/views/system/Redirect.vue";
 import type { MenuGroupType } from "@halo-dev/console-shared";
 
 export const routes: Array<RouteRecordRaw> = [
@@ -30,6 +31,11 @@ export const routes: Array<RouteRecordRaw> = [
       title: "core.setup.title",
     },
   },
+  {
+    path: "/redirect",
+    name: "Redirect",
+    component: Redirect,
+  },
 ];
 
 export const coreMenuGroups: MenuGroupType[] = [
diff --git a/console/src/views/system/Redirect.vue b/console/src/views/system/Redirect.vue
new file mode 100644
index 000000000..53428fc1a
--- /dev/null
+++ b/console/src/views/system/Redirect.vue
@@ -0,0 +1,41 @@
+<script lang="ts" setup>
+import { useRoute, useRouter } from "vue-router";
+
+const route = useRoute();
+const router = useRouter();
+
+if (allowRedirect()) {
+  window.location.href = route.query.redirect_uri as string;
+} else {
+  router.push({
+    name: "Dashboard",
+  });
+}
+
+function allowRedirect() {
+  const redirect_uri = route.query.redirect_uri as string;
+
+  if (!redirect_uri || redirect_uri === window.location.href) {
+    return false;
+  }
+
+  if (redirect_uri.startsWith("/")) {
+    return true;
+  }
+
+  if (
+    redirect_uri.startsWith("https://") ||
+    redirect_uri.startsWith("http://")
+  ) {
+    const url = new URL(redirect_uri);
+    if (url.origin === window.location.origin) {
+      return true;
+    }
+  }
+
+  return false;
+}
+</script>
+<template>
+  <div id="loader"></div>
+</template>