React登录系统自动重定向至/dashboard的问题求助

你的问题核心是跨域场景下后端直接重定向无效——客户端跑在3000端口，服务端在3001，后端res.redirect('/dashboard')会让浏览器去请求localhost:3001/dashboard，但你的前端页面和/dashboard路由都在3000端口，所以肯定找不到。

前后端分离架构下，正确的做法是后端返回登录状态，由前端负责跳转，具体实现如下：

1. 修改后端代码，返回登录状态JSON #

把原来的console.log和res.end()改成返回JSON格式的登录结果，让前端能根据结果做对应操作：

app.post("/login", (req, res) => {
    // 捕获输入字段
    const username = req.body.username;
    const password = req.body.password;
    // 校验输入是否为空
    if (username && password) {
      db.query(
        "SELECT * FROM users WHERE username = ? AND password = ?",
        [username, password],
        function (error, results, fields) {
          if (error) {
            // 处理数据库查询错误
            return res.json({ success: false, message: "服务器内部错误" });
          }
          // 判断账号是否存在
          if (results.length > 0) {
            // 登录成功，返回状态和跳转路径
            res.json({ 
              success: true, 
              message: "登录成功",
              redirectPath: "/dashboard"
            });
          } else {
            // 账号不存在或密码错误
            res.json({ 
              success: false, 
              message: "用户名或密码错误" 
            });
          }
        }
      );
    } else {
      res.json({ 
        success: false, 
        message: "请输入用户名和密码！" 
      });
    }
  });

2. 前端处理登录结果并跳转 #

在前端的登录请求回调里，根据后端返回的success状态，执行页面跳转逻辑（以下是用fetch的示例）：

// 假设这是前端的登录提交函数
async function handleLogin() {
  const username = document.getElementById('username').value;
  const password = document.getElementById('password').value;
  
  try {
    const response = await fetch('http://localhost:3001/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    
    if (data.success) {
      // 跳转到客户端的dashboard路由
      window.location.href = data.redirectPath;
    } else {
      alert(data.message);
    }
  } catch (err) {
    alert("登录请求失败，请检查网络连接");
  }
}

额外注意事项 #

• 密码安全：你现在的代码是直接用明文密码查询数据库，这非常不安全。实际开发中需要用bcrypt等库对密码进行哈希处理，存储哈希值而不是明文，登录时也需要对输入的密码哈希后再和数据库的值对比。
• 身份验证：登录成功后建议生成JWT令牌或者创建Session，后续前端请求接口时携带令牌，服务端校验身份，避免未登录用户直接访问/dashboard。

内容的提问来源于stack exchange，提问作者Jakub Polański