如何使用 JavaScript Fetch API 登录后重定向用户？

如何使用 JavaScript Fetch API 登录后将用户重定向到另一个页面？

问题

使用下面的 JavaScript 代码，身份验证令牌为首先使用 firebase.auth() 方法获得。然后向 FastAPI 后端发出 POST 请求。如果令牌有效，则返回重定向响应。然而，用户实际上并未被重定向，原始页面仍保持加载状态。

<code class="javascript">function loginGoogle() {
  var provider = new firebase.auth.GoogleAuthProvider();
  firebase.auth()
    .signInWithPopup(provider)
    .then((result) => {
      // ...
    })
    .catch((error) => {
      // Handle Errors here.
      // ...
    });

  firebase.auth().currentUser.getIdToken(true).then((idToken) => {
    // ...
    const headers = new Headers({
      'x-auth-token': idToken
    });
    const request = new Request('http://localhost:8000/login', {
      method: 'POST',
      headers: headers
    });
    fetch(request)
      .then(response => response.json())
      .then(data => console.log(data))
      .catch(error => console.error(error));
  });
}</code>

解决方案：选项 1 - 返回 RedirectResponse

默认情况下，JavaScript 中的 fetch() 方法设置遵循重定向模式，这意味着用户不会被重定向到新页面，而是重定向响应将在幕后自动处理。如果要手动处理重定向，可以将重定向模式设置为手动，然后使用 Response.redirected 和 Response.url 属性获取重定向 URL，并使用 window.location.href 或 window 将用户自己重定向到该 URL .location.replace().

解决方案：选项 2 - 返回包含重定向 URL 的 JSON 响应

您可以返回带有 URL 的普通 JSON 响应，而不是从服务器返回 RedirectResponse包含在 JSON 对象中。在客户端，检查从服务器返回的 JSON 对象是否包含 url 键，如果包含，则检索其值并使用 window.location.href 或 window.location.replace() 将用户重定向到该 URL。

解决方案：选项 3 - 使用 HTML

在前端

如果您的项目不需要使用 fetch() 请求，请考虑使用普通的 HTML

并让用户单击提交按钮将 POST 请求发送到服务器。在服务器端使用 RedirectResponse 会导致用户在提交表单时自动重定向到目标 URL。

以上是如何使用 JavaScript Fetch API 登录后重定向用户？的详细内容。更多信息请关注PHP中文网其他相关文章！