React登录验证失效求助：输入错误凭证仍跳转至用户仪表盘

你的核心问题是前端登录逻辑错误混淆了后端返回的状态码与响应体数据，导致无论凭证正确与否都会跳转至仪表盘：

• 前端代码里用data === 400判断错误，但后端返回的data是JSON对象（比如{ error: "Invalid credentials" }），永远不可能等于数字400；
• 只要后端返回了合法JSON响应（哪怕是400错误状态），!data都会是false，代码会一直走到else分支执行跳转。

1. 修正前端Login.jsx的判断逻辑 #

改用Fetch API的res.ok属性判断请求是否成功（状态码200-299），再结合响应体内容处理提示：

const PostData = async (e) => {
    e.preventDefault()
    const { email, password } = detail
    
    const res = await fetch("/login", {
        method: "POST",
        headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
        },
        body: JSON.stringify({ email, password })
    })

    const data = await res.json()
    
    // 先判断请求是否成功
    if (!res.ok) {
        alert(data.error || "登录失败，请检查凭证")
        navigate('/')
    } else {
        alert("登录成功")
        navigate('/dashboard')
    }
}

2. 优化后端错误返回（可选） #

统一后端错误返回格式，避免前端处理混乱：

router.post("/login", async (req, res) => {
    let token
    try {
        const { email, password } = req.body
        if (!email || !password) {
            return res.status(400).json({ error: "请填写完整登录信息" })
        }

        const UserLogin = await User.findOne({ email: email })
        if (!UserLogin) {
            return res.status(400).json({ error: "无效的登录凭证" })
        }

        const passmatch = await bcrypt.compare(password, UserLogin.password)
        if (!passmatch) {
            return res.status(400).json({ error: "无效的登录凭证" })
        }

        // 验证通过，生成token并返回
        token = await UserLogin.generateAuthToken()
        res.cookie("jwt", token, {
            expires: new Date(Date.now() + 25892000000),
            httpOnly: true
        })
        res.status(200).json({ message: "登录成功" })

    } catch (err) {
        console.log(err);
        res.status(500).json({ error: "服务器内部错误" })
    }
})

• res.ok是Fetch API的标准属性：当响应状态码在200-299区间时为true，否则为false，这是判断请求是否成功的正确方式；
• 别混淆HTTP状态码和响应体数据：后端的res.status(400)是HTTP状态码，前端要通过res.status或res.ok获取，res.json()返回的是后端发送的具体内容。

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