React登录页面触发无效凭证提示但API返回正确信息求助

核心问题 #

你代码里用json.success判断登录成功，但控制台输出显示服务器返回的成功标识字段大概率和你写的大小写/拼写不匹配——比如服务器返回的是Success（首字母大写），或者字段名是isSuccess这类其他写法，导致json.success拿到的是undefined，直接进入else分支。

修复方案 #

1. 核对字段名：在控制台展开返回的JSON对象，确认成功状态的字段名，把代码里的判断改成对应字段。比如服务器返回"Success": true，就把判断改成if(json.Success)。
2. 增加请求错误捕获：给异步请求加try/catch，同时先判断HTTP请求本身是否成功，避免网络错误导致逻辑异常：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
        const response = await fetch("http://localhost:5000/api/auth/login", {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({email: credentials.email, password: credentials.password})
        });
        // 先判断HTTP请求是否成功（状态码200-299）
        if (!response.ok) {
            throw new Error('请求失败');
        }
        const json = await response.json()
        console.log(json);

        // 替换成你实际从控制台看到的成功字段名
        if (json.success){ 
            localStorage.setItem('token', json.AuthToken);
            navigate("/"); 
        }
        else{
            alert("Invalid credentials");
        }
    } catch (err) {
        alert('网络请求出错，请稍后重试');
        console.error(err);
    }
}

额外提示 #

• 控制台里可以右键复制返回的JSON内容，直接对比代码里的字段名，避免肉眼看错大小写。
• 建议把登录失败的提示改成从服务器返回的错误信息，比如alert(json.message)，这样用户能看到更准确的失败原因。

内容的提问来源于stack exchange，提问作者Parth Singh