如何使用 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中文網其他相關文章！