首页 > 后端开发 > Python教程 > 如何使用 JavaScript Fetch API 登录后重定向用户?

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

Patricia Arquette
发布: 2024-10-18 22:40:04
原创
1092 人浏览过

How Do I Redirect Users After Login Using 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中文网其他相关文章!

来源:php
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板