mirror of https://github.com/halo-dev/halo
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
parent
ebcafe6117
commit
b37ec04c87
|
@ -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();
|
||||
}
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
|
@ -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[] = [
|
||||
|
|
|
@ -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>
|
Loading…
Reference in New Issue