mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-12 02:06:37 +08:00
fix(frontend): resolve login redirect loop and clean up info tab
- Prevent infinite session probe requests on the login page by guarding the check with the authenticated user state and using the Latest Ref pattern. - Decouple useEffect from resolveRedirectTarget by using resolveRedirectTargetRef to avoid searchParams dependency loops. - Remove the unused '服务连接' Card from the settings info tab and clean up unused imports, queries, and properties.
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import {useCallback, useEffect, useState} from "react"
|
import {useCallback, useEffect, useRef, useState} from "react"
|
||||||
import {AnimatePresence, motion} from "motion/react"
|
import {AnimatePresence, motion} from "motion/react"
|
||||||
import {useRouter, useSearchParams} from "next/navigation"
|
import {useRouter, useSearchParams} from "next/navigation"
|
||||||
import {toast} from "sonner"
|
import {toast} from "sonner"
|
||||||
@@ -27,7 +27,7 @@ import {safeRedirectTarget} from "@/lib/utils"
|
|||||||
export function LoginPage() {
|
export function LoginPage() {
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const searchParams = useSearchParams()
|
const searchParams = useSearchParams()
|
||||||
const { setUser } = useAuth()
|
const { user, setUser } = useAuth()
|
||||||
const [showOTP, setShowOTP] = useState(false)
|
const [showOTP, setShowOTP] = useState(false)
|
||||||
|
|
||||||
/* 处理OAuth回调 */
|
/* 处理OAuth回调 */
|
||||||
@@ -39,6 +39,8 @@ export function LoginPage() {
|
|||||||
const [isCheckingSession, setIsCheckingSession] = useState(() => !searchParams.get('state') || !searchParams.get('code'))
|
const [isCheckingSession, setIsCheckingSession] = useState(() => !searchParams.get('state') || !searchParams.get('code'))
|
||||||
|
|
||||||
const [loginSuccess, setLoginSuccess] = useState(false)
|
const [loginSuccess, setLoginSuccess] = useState(false)
|
||||||
|
const redirectedRef = useRef(false)
|
||||||
|
const callbackProcessedRef = useRef(false)
|
||||||
|
|
||||||
const resolveRedirectTarget = useCallback(() => {
|
const resolveRedirectTarget = useCallback(() => {
|
||||||
const callbackUrl = searchParams.get('callbackUrl')
|
const callbackUrl = searchParams.get('callbackUrl')
|
||||||
@@ -52,6 +54,11 @@ export function LoginPage() {
|
|||||||
return safeRedirectTarget(target)
|
return safeRedirectTarget(target)
|
||||||
}, [searchParams])
|
}, [searchParams])
|
||||||
|
|
||||||
|
const resolveRedirectTargetRef = useRef(resolveRedirectTarget)
|
||||||
|
useEffect(() => {
|
||||||
|
resolveRedirectTargetRef.current = resolveRedirectTarget
|
||||||
|
}, [resolveRedirectTarget])
|
||||||
|
|
||||||
|
|
||||||
/* 登录页兜底:已登录用户直接跳转 */
|
/* 登录页兜底:已登录用户直接跳转 */
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -63,6 +70,15 @@ export function LoginPage() {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (user) {
|
||||||
|
if (!redirectedRef.current) {
|
||||||
|
redirectedRef.current = true
|
||||||
|
router.replace(resolveRedirectTargetRef.current())
|
||||||
|
setIsCheckingSession(false)
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
let cancelled = false
|
let cancelled = false
|
||||||
|
|
||||||
const checkExistingSession = async () => {
|
const checkExistingSession = async () => {
|
||||||
@@ -81,7 +97,10 @@ export function LoginPage() {
|
|||||||
if (payload?.data) {
|
if (payload?.data) {
|
||||||
setUser(payload.data)
|
setUser(payload.data)
|
||||||
}
|
}
|
||||||
router.replace(resolveRedirectTarget())
|
if (!redirectedRef.current) {
|
||||||
|
redirectedRef.current = true
|
||||||
|
router.replace(resolveRedirectTargetRef.current())
|
||||||
|
}
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
@@ -100,7 +119,7 @@ export function LoginPage() {
|
|||||||
return () => {
|
return () => {
|
||||||
cancelled = true
|
cancelled = true
|
||||||
}
|
}
|
||||||
}, [router, searchParams, resolveRedirectTarget, setUser])
|
}, [router, searchParams, setUser, user])
|
||||||
|
|
||||||
/* 回调逻辑 */
|
/* 回调逻辑 */
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -109,6 +128,9 @@ export function LoginPage() {
|
|||||||
const code = searchParams.get('code')
|
const code = searchParams.get('code')
|
||||||
|
|
||||||
if (state && code) {
|
if (state && code) {
|
||||||
|
if (callbackProcessedRef.current) return
|
||||||
|
callbackProcessedRef.current = true
|
||||||
|
|
||||||
setIsProcessingCallback(true)
|
setIsProcessingCallback(true)
|
||||||
try {
|
try {
|
||||||
const result = await services.auth.handleCallback({ state, code })
|
const result = await services.auth.handleCallback({ state, code })
|
||||||
@@ -125,7 +147,10 @@ export function LoginPage() {
|
|||||||
toast.success(result.status === "bound" ? "绑定成功" : "登录成功")
|
toast.success(result.status === "bound" ? "绑定成功" : "登录成功")
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
router.replace(resolveRedirectTarget())
|
if (!redirectedRef.current) {
|
||||||
|
redirectedRef.current = true
|
||||||
|
router.replace(resolveRedirectTargetRef.current())
|
||||||
|
}
|
||||||
}, 1500)
|
}, 1500)
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('OAuth callback error:', error)
|
console.error('OAuth callback error:', error)
|
||||||
@@ -136,7 +161,7 @@ export function LoginPage() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
handleOAuthCallback()
|
handleOAuthCallback()
|
||||||
}, [searchParams, router, resolveRedirectTarget, setUser])
|
}, [router, searchParams, setUser])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<AuthShell wide={showOTP}>
|
<AuthShell wide={showOTP}>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
"use client"
|
"use client"
|
||||||
|
|
||||||
import {useMutation, useQuery} from "@tanstack/react-query"
|
import {useMutation, useQuery} from "@tanstack/react-query"
|
||||||
import {ExternalLink, RefreshCw, Server, Sparkles} from "lucide-react"
|
import {ExternalLink, RefreshCw, Sparkles} from "lucide-react"
|
||||||
import {toast} from "sonner"
|
import {toast} from "sonner"
|
||||||
|
|
||||||
import {AdminService, apiConfig} from "@/lib/services"
|
import {AdminService} from "@/lib/services"
|
||||||
import {
|
import {
|
||||||
AlertDialog,
|
AlertDialog,
|
||||||
AlertDialogAction,
|
AlertDialogAction,
|
||||||
@@ -30,12 +30,7 @@ function InfoRow({ label, value }: { label: string; value: React.ReactNode }) {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
interface InfoTabProps {
|
export function InfoTab() {
|
||||||
systemConfigsLength: number
|
|
||||||
authSourcesLength: number
|
|
||||||
}
|
|
||||||
|
|
||||||
export function InfoTab({ systemConfigsLength, authSourcesLength }: InfoTabProps) {
|
|
||||||
const updateQuery = useQuery({
|
const updateQuery = useQuery({
|
||||||
queryKey: ["admin", "update"],
|
queryKey: ["admin", "update"],
|
||||||
queryFn: () => AdminService.getUpdateStatus(),
|
queryFn: () => AdminService.getUpdateStatus(),
|
||||||
@@ -163,27 +158,6 @@ export function InfoTab({ systemConfigsLength, authSourcesLength }: InfoTabProps
|
|||||||
) : null}
|
) : null}
|
||||||
</CardContent>
|
</CardContent>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card className="border border-dashed shadow-sm">
|
|
||||||
<CardHeader className="border-b border-dashed pb-4">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<div className="p-1.5 rounded-lg bg-muted text-muted-foreground">
|
|
||||||
<Server className="size-4" />
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<CardTitle className="text-base font-semibold">服务连接</CardTitle>
|
|
||||||
<CardDescription className="text-xs">前端 API 客户端的基础连接参数</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="pt-4">
|
|
||||||
<InfoRow label="API Base URL" value={apiConfig.baseURL || "同源"} />
|
|
||||||
<InfoRow label="请求超时" value={`${apiConfig.timeout}ms`} />
|
|
||||||
<InfoRow label="携带凭证" value={apiConfig.withCredentials ? "是" : "否"} />
|
|
||||||
<InfoRow label="系统配置项" value={`${systemConfigsLength} 项`} />
|
|
||||||
<InfoRow label="认证源数量" value={`${authSourcesLength} 个`} />
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -35,12 +35,6 @@ export function SystemSettingsMain() {
|
|||||||
enabled: !!user?.is_admin,
|
enabled: !!user?.is_admin,
|
||||||
})
|
})
|
||||||
|
|
||||||
const authSourcesQuery = useQuery({
|
|
||||||
queryKey: ["auth", "sources"],
|
|
||||||
queryFn: () => AdminService.listAuthSources(),
|
|
||||||
enabled: !!user?.is_admin,
|
|
||||||
})
|
|
||||||
|
|
||||||
const configs = useMemo(
|
const configs = useMemo(
|
||||||
() => systemConfigMap(systemConfigsQuery.data ?? []),
|
() => systemConfigMap(systemConfigsQuery.data ?? []),
|
||||||
[systemConfigsQuery.data],
|
[systemConfigsQuery.data],
|
||||||
@@ -112,10 +106,7 @@ export function SystemSettingsMain() {
|
|||||||
<OtherTab configs={configs} />
|
<OtherTab configs={configs} />
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
<TabsContent value="info" className="pt-4">
|
<TabsContent value="info" className="pt-4">
|
||||||
<InfoTab
|
<InfoTab />
|
||||||
systemConfigsLength={systemConfigsQuery.data?.length ?? 0}
|
|
||||||
authSourcesLength={authSourcesQuery.data?.length ?? 0}
|
|
||||||
/>
|
|
||||||
</TabsContent>
|
</TabsContent>
|
||||||
</Tabs>
|
</Tabs>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
|
|||||||
Reference in New Issue
Block a user