Insomnia登录验证正常，前端验证失效：输错账号密码仍跳转首页

问题原因 #

后端在账号不存在或密码错误时，返回的是200状态码+错误信息JSON，而axios只有当HTTP状态码为4xx/5xx时才会进入catch块。所以前端无论请求结果是否成功，都会执行try块里的navigate("/")，导致错误情况下也跳转到首页。

修复步骤 #

1. 修改后端代码：错误场景返回对应HTTP状态码

把错误响应的状态码改为4xx，让axios能识别这是错误请求：

router.post("/login", async (req,res) =>{
    const { username, password } = req.body;
    const user = await UserModel.findOne({username});

    if (!user) {
        // 用户不存在返回404状态码
        return res.status(404).json({message: "User doesn't exist!"});
    }
    const checkpass = await bcrypt.compare(password, user.password);

    if(!checkpass){
        // 密码错误返回401未授权状态码
        return res.status(401).json({message: "Username or Password is Incorrect!"});
    }

    const token = jwt.sign({id: user._id}, "secret");
    res.json({ token, userID: user._id});
});

2. 修改前端代码：处理错误提示并阻止跳转

在catch块里捕获错误，提示用户，同时不要执行跳转逻辑；另外也可以在try块里判断是否拿到token，确保只有登录成功才跳转：

const Auth = (props) => {
  props.funcNav(false)
  
  const [_, setCookies] = useCookies(["access_token"]);
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const result = await axios.post("http://localhost:5174/auth/login", {
        username,
        password,
      });
      // 确认返回数据包含token才执行登录逻辑
      if (result.data.token) {
        setCookies("access_token", result.data.token);
        window.localStorage.setItem("userID", result.data.userID);
        navigate("/");
      } else {
        alert(result.data.message || "登录失败");
      }
    } catch (error) {
      // 捕获后端返回的错误信息并提示
      alert(error.response?.data?.message || "登录出错，请重试");
      console.error(error);
    }
  }
}

额外说明 #

如果不想修改后端状态码，也可以在前端try块里直接判断返回的result.data是否包含token：如果没有，就提示错误信息，不执行跳转逻辑。但规范的做法是后端用HTTP状态码区分成功/错误请求，这样更符合RESTful设计原则。

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