登录成功后如何重定向

Question

如果登录成功，如何从登录页面重定向？我正在使用HTTPOnly Cookie进行用户身份验证。使用下面的代码，如果用户使用凭据登录，我可以重定向到主页。然而，如果用户输入了错误的用户名或密码，页面会导航到主页，但用户没有登录。如何使页面仅在凭据正确时导航，而在凭据不正确时避免导航到主页？

登录.jsx

function Login({ onUpdateUser }) {
const [formData, setFormData] = useState({
username: "",
password: "",
});
const navigate = useNavigate();
function handleChange(e) {
setFormData({ ...formData, [e.target.name]: e.target.value });
}
function handleSubmit(e) {
e.preventDefault();
fetch("http://localhost:3000/api/v1/login", {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((r) => {
if (!r.ok) throw Error("Incorrect username or password!")
.then(navigate('/login'))
})
.then((user) => onUpdateUser(user))
.then(navigate('/'))
}

Answer 1

.then中的if condition部分似乎可疑。

我认为它应该像一样

.then((r) => {
if (!r.ok){
throw Error("Incorrect username or password!")
}else{
// username and email are true and accepted so navigate to "/"
navigate('/')
}
})
.then((user) => onUpdateUser(user))

Answer 2

我想你可以试试这个

.then(()=> navigate('Home'))

而不是

.then(navigate('/login'))

Answer 3

您对promise... then...的使用似乎不正确。

.then(navigate('/login'))

应该是

.then(()=> navigate('/login'))