feat: 更新 OIDC 登录逻辑,确保用户在绑定前登出当前账户;修改中文翻译以提升用户体验

This commit is contained in:
2025-09-23 18:03:53 +08:00
parent f59767d914
commit 6e3c3cddee
2 changed files with 19 additions and 11 deletions

View File

@ -14,7 +14,7 @@ import { Label } from "@/components/ui/label"
import Image from "next/image" import Image from "next/image"
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import type { OidcConfig } from "@/models/oidc-config" import type { OidcConfig } from "@/models/oidc-config"
import { getCaptchaConfig, listOidcConfigs, userLogin } from "@/api/user" import { getCaptchaConfig, listOidcConfigs, userLogin, userLogout } from "@/api/user"
import Link from "next/link" import Link from "next/link"
import { useRouter, useSearchParams } from "next/navigation" import { useRouter, useSearchParams } from "next/navigation"
import { useTranslations } from "next-intl" import { useTranslations } from "next-intl"
@ -104,7 +104,7 @@ export function LoginForm({
</CardHeader> </CardHeader>
<CardContent> <CardContent>
<CurrentLogged /> <CurrentLogged />
<SectionDivider className="mb-6">{user ? t("bind_oidc") : t("with_oidc")}</SectionDivider> <SectionDivider className="mb-6">{t("with_oidc")}</SectionDivider>
<form> <form>
<div className="grid gap-4"> <div className="grid gap-4">
{/* OIDC 登录选项 */} {/* OIDC 登录选项 */}
@ -205,19 +205,27 @@ function LoginWithOidc({
displayName = "Login with OIDC", displayName = "Login with OIDC",
icon = "/oidc-icon.svg", icon = "/oidc-icon.svg",
}: LoginWithOidcProps) { }: LoginWithOidcProps) {
const { user } = useAuth();
const router = useRouter();
const handleOidcLogin = async () => {
// 使用第三方登录时,如果当前已经有登录用户了,则先登出当前用户,避免后端直接使用登录态进行绑定(接口是这样设计的)
if (user) {
await userLogout()
}
router.push(loginUrl);
}
return ( return (
<Button <Button
variant="outline" variant="outline"
className="w-full" className="w-full"
asChild onClick={handleOidcLogin}
> >
<Link href={loginUrl}> <Avatar className="h-6 w-6 rounded-full">
<Avatar className="h-6 w-6 rounded-full"> <AvatarImage src={icon} alt={displayName} />
<AvatarImage src={icon} alt={displayName} /> <AvatarFallback className="rounded-full"></AvatarFallback>
<AvatarFallback className="rounded-full"></AvatarFallback> </Avatar>
</Avatar> {displayName}
{displayName}
</Link>
</Button> </Button>
) )
} }

View File

@ -128,7 +128,7 @@
} }
}, },
"Login": { "Login": {
"bind_oidc": "绑定第三方账号", "bind_oidc": "继续绑定第三方账号",
"captcha_error": "验证错误,请重试。", "captcha_error": "验证错误,请重试。",
"continue": "继续", "continue": "继续",
"currently_logged_in": "当前已登录为", "currently_logged_in": "当前已登录为",