使用axiosInstance登录成功但返回400错误且无法跳转至仪表盘

核心问题及修复方案 #

1. 后端登录成功错误返回400状态码 #

后端登录逻辑中，验证通过后错误地返回了400 Bad Request状态码——axios会将所有非2xx的状态码判定为请求失败，直接进入catch块，导致前端无法正常处理成功响应，这是无法跳转控制台报错的根源。

修复后端代码：
将登录成功的响应状态码改为200 OK：

if(userInfo.email === email && userInfo.password === password){
    const user = {user: userInfo};
    const accessToken = jwt.sign(user, process.env.ACCESS_TOKEN_SECRET, {expiresIn: "36000m"});
    // 把400改为200
    return res.status(200).json({
        error: false,
        message: "Login Successful",
        email,
        accessToken,
    });
}

2. 前端密码验证缺失终止逻辑 #

前端handleLogin中，密码为空的判断没有添加return，会导致即使密码为空，代码仍会继续执行setError("")并发送登录请求，引发不必要的错误流程。

修复前端代码：

if (!password) {
  setError("Please enter the password");
  // 添加return终止后续代码执行
  return;
}

3. 额外安全优化建议（非当前问题核心，但需重视） #

后端直接明文对比密码存在严重安全风险，建议：

• 用户注册时使用bcrypt等工具对密码进行哈希存储
• 登录时用bcrypt的compare方法验证密码，而非直接对比明文

示例修改（后端逻辑）：

// 注册阶段哈希密码
const hashedPassword = await bcrypt.hash(password, 10);
await User.create({ email, password: hashedPassword });

// 登录阶段验证密码
const isValidPassword = await bcrypt.compare(password, userInfo.password);
if(userInfo.email === email && isValidPassword){
    // 生成token并返回成功响应
}

修复上述问题后，前端就能正常接收成功响应、存储token并跳转到/dashboard页面，控制台的Promise错误也会随之消失。

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