React登录按钮需验证通过后跳转页面问题求助

你的问题出在登录按钮的点击逻辑上——当前navigate("/question")会在handleLogin的异步请求完成前直接执行，导致不管登录验证是否通过都会跳转。只需将跳转逻辑移到登录请求成功的回调链中即可：

修改后的代码 #

import React, { useState } from "react";
import { NavLink, useNavigate } from "react-router-dom";
import axios from "axios";
import "./LoginPage.css";

export default function LoginPage() {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const [me, setMe] = useState("");

  const navigate = useNavigate();

  function handleLogin() {
    axios
      .get("api/user/login", { auth: { username, password } })
      .then((response) => response.data)
      .then((data) => {
        setMe(data);
        // 登录成功后执行跳转
        navigate("/question");
      })
      .then(() => setUsername(""))
      .then(() => setPassword(""))
      .catch(() => alert("Sorry, Username or Password is wrong or Empty!"));
  }

  function handleLogout() {
    axios.get("api/user/logout").then(() => setMe(""));
  }

  return (
    <div className={"login-main"}>
      <NavLink to={"/question"}>zur Question Page</NavLink>
      <h1>Login Page</h1>
      <h3>Login</h3>
      <input
        placeholder={"Username ..."}
        value={username}
        onChange={(event) => setUsername(event.target.value)}
      />
      <input
        placeholder={"Password ..."}
        type={"password"}
        value={password}
        onChange={(event) => setPassword(event.target.value)}
      />
      {/* 按钮点击只需调用handleLogin，跳转逻辑已移至请求成功回调 */}
      <button onClick={handleLogin}>Login</button>
    </div>
  );
}

关键修改点 #

• 在handleLogin的成功回调中，设置用户状态后立即调用navigate("/question")，确保只有登录验证通过才跳转
• 简化按钮的onClick事件，直接绑定handleLogin，不再单独执行跳转逻辑

内容的提问来源于stack exchange，提问作者Amir Tafkhimi