javascript - 如何根据express/mssql中间件反馈有条件地渲染页面

Question

我已经制作了一个完整的堆栈应用程序，其中注册事件成功添加到数据库。 我将如何根据登录是否正确有条件地呈现主页。

在我的登录路径中，我有一个 if 语句，如果不存在，则成功记录“坏信用”；如果存在，则成功记录“登录:登录成功..”。

我在句柄提交中添加了一个重定向(一旦按下登录表单按钮就会触发)，如果成功则应该触发该重定向(从技术上讲是这样，但它确定“不良信用也成功”)。

我尝试过 if stametn，但我不确定如何将其与快速中间件一起使用。

我希望句柄提交部分执行的逻辑类似于

if (login successful){
window.location.href = "/home";

}

else {
window.location.href = "/login";
(preferably with a alert )
}

登录路径

app.post("/login", async (req, response) => {
  try {
    await sql.connect(config);

    var request = new sql.Request();
    var Email = req.body.email;
    var Password = req.body.password;

    console.log({ Email, Password });

    request.input("Email", sql.VarChar, Email);
    request.input("Password", sql.VarChar, Password);

    var queryString =
      "SELECT * FROM TestLogin WHERE email = @Email AND password = @Password";

      //"SELECT * FROM RegisteredUsers WHERE email = @Email AND Password = HASHBYTES('SHA2_512', @Password + 'skrrt')";

    const result = await request.query(queryString);

    if (result.recordsets[0].length > 0) {
      console.info("/login: login successful..");
      console.log(req.body);
      req.session.loggedin = true;
      req.session.email = Email;
      response.send("User logined");
    } else {
      console.info("/login: bad creds");
      response.status(400).send("Incorrect email and/or Password!");
    }
  } catch (err) {
    console.log("Err: ", err);
    response.status(500).send("Check api console.log for the error");
  }
});

 handleSubmit(e) {
    e.preventDefault();
    if (this.state.email.length < 8 || this.state.password.length < 8) {
      alert(`please enter the form correctly `);
    } else {
      const data = { email: this.state.email, password: this.state.password };

      fetch("/login", {
        method: "POST", // or 'PUT'
        headers: {
          Accept: "application/json, text/plain, */*",
          "Content-Type": "application/json"
        },
        body: JSON.stringify(data)
      })
        // .then(response => response.json())
        .then(data => {
          console.log("Success:", data);

          // if ( ) {
          //   console.log("nice");
          // } else {
          //   console.log("not nice");
          // }
          // window.location.href = "/home";
        })

        .catch(error => {
          console.error("Error:", error);
        });
    }
  }
  catch(e) {
    console.log(e);
  }

Answer 1

您应该首先解释一下您的前端有一个 React 应用程序。同时谈论 Express 中间件和登录路由有点困惑。 :)

您正在做的是通过 API 进行登录/登录过程。这意味着您的服务器应该返回有关登录结果的 JSON 信息。然后，您的前端应该以您想要的方式处理该问题。这意味着您的服务器应该将登录请求视为任何其他数据请求。返回状态代码和一些可选的 JSON 数据。

身份验证是一个大主题，由于您没有提供很多详细信息，我只能告诉您整个过程应该如何正常进行:

1. 将用户凭据发送到服务器(就像您在 POST 请求中所做的那样)
2. 处理从服务器收到的响应。如果登录成功，您应该从服务器接收一些信息，例如用户 ID、电子邮件、 session ID，无论是在响应 JSON 数据中还是通过 HTTP header 。您应该将此信息保存在前端(通常保存在 localStorage 中)，并将其用于向服务器发出的每个请求以提供您的身份。您应该查找 JSON Web token 。
3. 在您的 React 应用程序中，您希望在启动应用程序时检查用户是否已登录(使用步骤 2 中提到的信息，或尝试获取返回用户信息的端点，例如 /我)。如果您没有该信息或请求失败，请重定向到登录。
4. 在 React 应用程序的登录页面中，处理获取结果并在用户通过身份验证后重定向到主页，或者停留在那里并显示您想要的任何信息。

我认为，由于您使用用户登录，因此应保护某些资源免遭非登录用户访问或根据登录用户进行限制。这是通过 Express 服务器上的中间件完成的，该中间件应该检查​​ React 应用程序应随每个请求发送的用户 id/ token / session id 信息。

要使用 React Router 进行重定向，您不需要使用 window.location。您希望使用路由器本身来避免重新加载整个页面。您可以在登录路由组件上使用注入(inject)的 history 属性，或者使用 withRouter HOC 包装任何需要它的组件。

这篇文章似乎很好地列出了使用 React Router 的所有选项: https://serverless-stack.com/chapters/redirect-on-login-and-logout.html

希望这会有所帮助，这是一个复杂的主题，您应该将其分解为较小的问题并一次解决一个问题。 ;)