fix: 修复登录成功但未跳转内部页面的竞态
All checks were successful
Docker Build and Push / build-image (push) Successful in 6m12s
All checks were successful
Docker Build and Push / build-image (push) Successful in 6m12s
LoginPage.onSubmit 在 setUser 异步提交前手动 navigate(from),
切到受保护页时 user 仍为 null, 被 RequireAuth 立即踢回 /login,
导致提示登录成功却进不去内部页面。改为依赖组件顶部
<Navigate to={from} replace/> 在 user 就绪后可靠跳转。
This commit is contained in:
parent
60628775ac
commit
44d60471ca
@ -1,5 +1,5 @@
|
||||
import { useState } from 'react'
|
||||
import { useNavigate, useLocation, Navigate } from 'react-router-dom'
|
||||
import { useLocation, Navigate } from 'react-router-dom'
|
||||
import { Button, Card, Checkbox, Input, Toast } from 'antd-mobile'
|
||||
import { useAuth } from '../auth/AuthContext.jsx'
|
||||
|
||||
@ -7,7 +7,6 @@ import { useAuth } from '../auth/AuthContext.jsx'
|
||||
// 使用 antd-mobile: Input / Checkbox / Button / Card / Toast
|
||||
export default function LoginPage() {
|
||||
const { user, login } = useAuth()
|
||||
const navigate = useNavigate()
|
||||
const location = useLocation()
|
||||
const from = location.state?.from?.pathname || '/'
|
||||
|
||||
@ -17,6 +16,9 @@ export default function LoginPage() {
|
||||
const [busy, setBusy] = useState(false)
|
||||
const [err, setErr] = useState('')
|
||||
|
||||
// 登录成功后 user 会变成非空, 由顶部 <Navigate to={from} replace/> 负责可靠跳转
|
||||
// 不能在 onSubmit 里手动 navigate: setUser 是异步的, 在它提交前导航会切到受保护页,
|
||||
// 此时 user 仍为 null 被 RequireAuth 立刻踢回 /login, 造成"提示成功却进不去"
|
||||
if (user) return <Navigate to={from} replace />
|
||||
|
||||
async function onSubmit(e) {
|
||||
@ -26,7 +28,6 @@ export default function LoginPage() {
|
||||
try {
|
||||
await login(email.trim(), password, remember)
|
||||
Toast.show({ icon: 'success', content: '登录成功' })
|
||||
navigate(from, { replace: true })
|
||||
} catch (e) {
|
||||
setErr(e.message)
|
||||
} finally {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user