重定向到 React 组件 - Express

Question

我在前面有一个登录组件，我在其中对服务器上的路由进行 POST:

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      fetch("http://localhost:3000/login", {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });
    } catch (error) {
      console.log(error.message);
    }
  };

在服务器端，我对前端传来的信息进行验证：

app.post("/login", async (req, res) => {
  const user = await Users.findOne({
    where: { email: req.body.email, password: req.body.password },
  });
  if (user) {
    console.log(user);
    console.log("usuario logeado");

    res.status(200).send("LOGGED");
    
  } else {
    console.log("Usuario no Registrado");
  }
});

一旦我验证了用户并知道如何操作，我想重定向到前面的组件主页。

Answer 1

您需要读取服务器的响应并弄清楚您要用它做什么。我建议不要仅从服务器发送一个字符串，因此该解决方案将进行一些重组，希望能帮助您理解和扩展您自己的需求。

// From your server - we're sending some json that we can
// read in the front end code. Maybe you also want to send
// the user object or other data, and json is great for that.
app.post("/login", async (req, res) => {
  const user = await Users.findOne({
    where: { email: req.body.email, password: req.body.password },
  });
  if (user) {
    console.log(user);
    console.log("usuario logeado");

    res.status(200).send({
      isLoggedIn: true,
    });
    
  } else {
    console.log("Usuario no Registrado");
    res.status(200).send({
      isLoggedIn: false,
    });
  }
});

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const response = await fetch("http://localhost:3000/login", {
        method: "POST",
        mode: "cors",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
        body: JSON.stringify({
          email,
          password,
        }),
      });
      // Get the server response as json
      const data = await response.json()
      if(data.isLoggedIn) {
        // Redirect to the account
        window.location.href = "/account"
      } else {
        // Show some error message
        window.alert("Invalid login")
      }
    } catch (error) {
      console.log(error.message);
    }
  };

重定向到 React 组件 - Express

Redirecting to a React Component - Express

express

reactjs