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 где я просто делаю res.render("Hello World!") в моем экспресс-приложении, но даже тогда ничего не происходит на странице. Почему браузер не обновляет страницу, чтобы представить ответ от конечной точки?

Answer 1

Почему браузер не обновляет страницу, чтобы представить ответ от конечной точки?

Потому что весь смысл Ajax заключается в том, что ответ передается в JavaScript, поэтому вы можете делать с ним все, что вам нравится, вместо загрузки целой новой страницы.

Вы можете получить доступ к данным с помощью:

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

Answer 2

То, что вы сейчас создаете, - это, по сути, веб-приложение, которое взаимодействует с API от JS. Поскольку теперь вы выполняете логику на стороне клиента, а не на стороне сервера, вместо того, чтобы использовать Express для перенаправления на другой маршрут после входа в систему, вы должны выполнить маршрутизацию на стороне клиента.

Это означает, что после того, как вы получили успешный ответ (200) от API, вы должны направить клиента к нужному маршруту. Так что вы бы сделали что-то вроде:

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

Однако кажется, что вы делаете логику на стороне клиента случайно. Поэтому я бы порекомендовал прекратить использовать XMLHttpRequest и просто использовать <form> как вы делали в своем другом посте, и продолжайте свои усилия, чтобы попытаться заставить это работать. Таким образом, вы можете продолжить создание приложения ExpressJS для сервера.