XMLHttpRequest 不重新加载页面

Question

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    console.log("Signed in");
    return user.getIdToken(true).then(function(idToken) {
        // Send token to your backend via HTTPS
        // ...
        console.log("Token = " + idToken);
        var bearer = "Bearer " + idToken;
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "dashboard");
        xhr.setRequestHeader("Authorization", bearer);
        return xhr.send();
    }).catch(function(error) {
        // Handle error
        console.log(error);
    });
  }
  else{
    console.log("User signed out");
  }
});

我正在执行以下请求。在我的服务器中，我收到日志说它已收到请求并且已将其识别为经过身份验证的用户等等。事实上，为了进行测试，我将它发送到一个简单的端点，例如 /hello，我只是在我的 express 应用程序中执行 res.render("Hello World!")，但即便如此，页面上也没有任何反应。为什么浏览器不刷新页面来表示来自端点的响应？

Answer 1

为什么浏览器不刷新页面来表示来自端点的响应？

因为 Ajax 的整个 点是响应被传递给 JavaScript，因此您可以用它做自己喜欢的事情，而不是加载一个全新的页面。

您可以通过以下方式访问数据：

xhr.addEventListener("load", function () {
    console.log(this.responseText);
});

Answer 2

您现在构建的本质上是一个与来自 JS 的 API 进行通信的 web 应用程序。由于您现在在做逻辑客户端而不是服务器端，而不是使用 Express 在登录后重定向到另一个路由，您必须进行客户端路由。

这意味着在您收到来自 API 的成功响应 (200) 后，您必须将客户端定向到所需的路由。所以你会做这样的事情：

if (user) {
  window.location = "/dashboard";
}

但是，您似乎是在无意中执行客户端逻辑。因此，我建议您停止使用 XMLHttpRequest 并只使用 <form>，就像您在其他帖子中所做的那样，并继续努力尝试使其正常工作。通过这种方式，您可以继续构建服务器渲染的 ExpressJS 应用程序。