perf: improve the experience of redirection after login (#4014)

#### 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
```
pull/4018/head
Ryan Wang 2023-05-31 14:55:01 +08:00 committed by GitHub
parent ebcafe6117
commit b37ec04c87
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 70 additions and 48 deletions

View File

@ -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();
}

View File

@ -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();
});
}

View File

@ -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[] = [

View File

@ -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>