Axios + ReactJS + PassportJS 登录成功后重定向不生效问题求助

问题原因分析 #

1. 后端重定向不生效的原因 #

• 你通过Axios发起的是异步AJAX请求，不是浏览器原生的表单提交/页面跳转请求。对于AJAX请求，后端返回的302重定向会被Axios默认自动跟随，拿到的最终响应是重定向目标地址的内容，浏览器本身不会执行页面层面的跳转操作，所以看不到页面变化。

2. 前端跳转逻辑无论是否成功都执行的原因 #

• 你写的.then(history.push("/"))属于语法错误：then需要接收一个函数作为回调参数，但你直接调用了history.push("/")，相当于把这个方法的执行结果传给了then，只要Axios请求发起，这行代码会同步立即执行，和登录结果完全无关。

推荐实现方案 #

步骤1：调整后端接口逻辑 #

不要返回重定向，改为返回JSON格式的登录状态（注：你原有代码未做账号密码校验，需补全这部分逻辑后再调用req.login）：

exports.login = (req, res) => {
    const { email, name, username, password } = req.body;
    // 补全：先查询数据库校验账号密码是否正确，校验不通过直接返回401
    const user = new User({ email, name, username });
    req.login(user, (err) => {
        if (err) {
          return res.status(401).json({ success: false, msg: "登录凭证错误" });
        }
        console.log("LOGGED IN");
        res.status(200).json({ success: true, msg: "登录成功" });
    });
};

步骤2：调整前端登录逻辑 #

正确编写回调函数，根据后端返回的状态判断是否跳转：

const login = () => {
    Axios({
      method: "POST",
      data: {
        email: loginEmail,
        username: loginEmail,
        password: loginPassword,
      },
      withCredentials: true,
      url: "http://localhost:5000/login",
    }).then((res) => {
      if(res.data.success) {
        // 登录成功执行跳转
        history.push("/");
      } else {
        // 登录失败提示错误
        alert(res.data.msg);
      }
    }).catch(() => {
      alert("登录请求异常，请稍后重试");
    });
};

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