使用ajax进行用户身份验证和重新定向

伙计们，我正在使用ExpressJS作为我的服务器。 让我先给你讲解一下代码

最初，在我的网站主页上，用户在输入表单上提供登录详细信息。我使用ajax将这些详细信息（电子邮件、密码）发送到服务器。在服务器端，可能发生两种情况1。登录详细信息是正确的，在这种情况下，用户应该被带到网站的内部页面。2.登录详细信息不正确，在这种情况下，用户会在相应的文本框下看到错误消息（例如：您的密码不正确）

第二部分很简单。我的问题是第一部分。如果是ajax post请求，如何将HTML文件发送到客户端

这是我的服务器端代码

app.get("/", (req, res) => {
  //this is home page
  res.render("index");
});

app.post("/auth", (req, res) => {
  // console.log(req.body);
  const userEmail = req.body.email;
  const password = req.body.password;
  usersInstance.checkUser(userEmail, password, (err, userExists) => { // this is database method.
    console.log(err, userExists);
    if (userExists) res.render('foods.ejs');
    else res.send("user does not exist");
  });
});

这是我的客户端AJAX代码

$("form").submit((e) => {
  e.preventDefault();
  // alert("submit is clicked");
  const emailId = document.querySelector("#email").value;
  const password = document.querySelector("#password").value;
  $.ajax({
    url: "/auth",
    method: "POST",
    data: {
      email: emailId,
      password: password,
    },
    success: (res) => {
      if (res == "user exists") {
        // how to display foods.ejs page in this situation?
      }
    },
    error: (err) => {
      alert("failed");
    },
  });
});

---

我想问题是，如何正确处理这一行代码：

    if (userExists) res.render('foods.ejs');

这取决于您如何处理路由

如果您正在使用一些客户端路由（例如React路由器），那么您的nodejs服务器应该只充当API端点（大多数情况下只返回JSON）

在本例中，我猜您正在使用express routing作为路由器，当人们成功登录时，它将呈现

foods.ejs

问题是，这是Ajax调用，因此客户端不知道在完成Ajax后如何呈现此响应

正确的方法应该是，不使用Ajax，只使用标准表单和POST请求，让服务器决定做什么，而不是在客户端处理它

• 如果登录成功，则呈现

  foods.ejs

  （使用相同的代码）
• 如果登录失败，则使用一些数据呈现

  login.ejs

  （我假设您的登录UI位于

  login.ejs

  ）

比方说，在这种情况下，您真的想使用AJAX（我不知道，对于外观和感觉，可能是这样），有一种方法可以做到这一点：

在您的Ajax中：

...
success: (res) => {
      if (res == "user exists") {
         location.href = "http://{your-domain}/food"
      }
    },
...

---

如果您选择使用这种方法（我不喜欢这种方式，太麻烦了，代码也不干净），那么您需要正确处理身份验证—比如在express会话中保存用户名，或者使用一些基于令牌的方法来处理它（JWT、Oauth…），因为在浏览器上键入此内容的任何人都可以跳转到

food.ejs

：http://{your domain}/food

是的，这是非常正确的。我认为最好删除ajax，因为任何人都可以访问URL中的food.ejs文件。我认为有一种解决方法

if (userExists) res.status(200).send("user exists");

...

// new route:
app.get('/food', (req, res) => {
  //handle authentication check before rendering

  res.render('food.ejs');
})

...
success: (res) => {
      if (res == "user exists") {
         location.href = "http://{your-domain}/food"
      }
    },
...