feat: add redirect support for social auth provider (#4063)

#### What type of PR is this?

/area console
/kind feature
/milestone 2.7.x

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

三方登录时支持传入 `login_redirect_uri` 参数,以让三方登录提供方支持适配登录后重定向到具体页面的功能。

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

Fixes https://github.com/halo-dev/halo/issues/4029

#### Special notes for your reviewer:

测试方式:

1. 可以使用 https://github.com/halo-sigs/plugin-oauth2/pull/33 进行测试。
2. 手动在登录页面构造如 https://127.0.0.1:8090/console/login?redirect_uri=/ 的地址,观察使用三方登录之后是否会跳转到指定页面。

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

```release-note
Console 端三方登录支持重定向参数。
```
pull/4061/head
Ryan Wang 2023-06-26 21:35:58 +08:00 committed by GitHub
parent c39691d6fe
commit e13beb4cd1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 12 additions and 1 deletions

View File

@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { SocialAuthProvider } from "@/modules/system/actuator/types"; import type { SocialAuthProvider } from "@/modules/system/actuator/types";
import { useRouteQuery } from "@vueuse/router";
import { inject, ref } from "vue"; import { inject, ref } from "vue";
import type { Ref } from "vue"; import type { Ref } from "vue";
@ -10,8 +11,11 @@ const props = withDefaults(
{} {}
); );
const REDIRECT_URI_QUERY_PARAM = "login_redirect_uri";
const loading = ref(false); const loading = ref(false);
const redirect_uri = useRouteQuery<string>("redirect_uri", "");
const disabled = inject<Ref<boolean>>("disabled"); const disabled = inject<Ref<boolean>>("disabled");
function handleSocialLogin() { function handleSocialLogin() {
@ -20,7 +24,14 @@ function handleSocialLogin() {
} }
loading.value = true; loading.value = true;
window.location.href = props.authProvider.authenticationUrl;
let authenticationUrl = props.authProvider.authenticationUrl;
if (redirect_uri.value) {
authenticationUrl = `${authenticationUrl}?${REDIRECT_URI_QUERY_PARAM}=${redirect_uri.value}`;
}
window.location.href = authenticationUrl;
} }
</script> </script>