React+Node.js登录验证异常：错误账号密码仍提示登录成功

你的前端代码只判断了HTTP请求是否成功（比如后端返回200状态码），但没有校验后端返回的业务逻辑结果。即使账号密码错误，只要后端返回200状态码（很多后端会通过响应体返回失败信息而非抛出HTTP错误），axios就不会进入catch块，直接执行"登录成功"的提示。

修改登录逻辑，先获取后端返回的响应数据，根据业务状态判断登录结果：

import axios from "axios";
import { useState } from "react";
import { useNavigate } from 'react-router-dom';

function Login() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const navigate = useNavigate();

    async function login(event) {
        event.preventDefault();
        try {
          const response = await axios.post("http://localhost:9992/student/login", {
             email: email,
            password: password,
          });
          // 假设后端返回格式为 { success: boolean, message: string }
          if (response.data.success) {
            alert("Login Successfully");
            // navigate('/home');
          } else {
            alert(response.data.message || "Login Failed");
          }
        } catch (err) {
          // 处理HTTP请求失败的情况，比如网络错误、后端返回5xx等
          alert("Login Failed: " + (err.response?.data?.message || err.message));
        }
      }

    return (
     <div>
            <div className="container">
            <div className="row">
                <h2>Login</h2>
             <hr/>
             </div>

             <div className="row">
             <div className="col-sm-6">
 
             <form>
             <div className="form-group">
          <label>email</label>
          <input type="email"  className="form-control" id="email" placeholder="Enter Name"
          
          value={email}
          onChange={(event) => {
            setEmail(event.target.value);
          }}
          
          />
          
          
          
        </div>

        <div className="form-group">
            <label>password</label>
            <input type="password"  className="form-control" id="password" placeholder="Enter Fee"
            
            value={password}
            onChange={(event) => {
              setPassword(event.target.value);
            }}
            
            />
          </div>
                  <button type="submit" className="btn btn-primary" onClick={login} >Login</button>
              </form>

            </div>
            </div>
            </div>

     </div>
    );
}

export default Login;

• 接收axios.post的返回值response，通过response.data获取后端业务数据
• 根据后端约定的字段（比如success）判断登录是否真正成功，而非仅依赖HTTP状态
• 修复了catch块中"Login Failed"的拼写错误
• 把class改为React推荐的className（符合React语法规范）

内容的提问来源于stack exchange，提问作者abi jega