登入後如何使用 JavaScript Fetch API 將使用者重新導向至另一個頁面？

在提供的程式碼中，JavaScript fetch() 方法用於使用從 Google 獲得的令牌向後端端點發送 POST 請求。後端驗證 token 後，會回傳一個 RedirectResponse，狀態碼為 303。但是，瀏覽器中不會發生重定向。

選項 1：傳回 RedirectResponse

預設情況下，fetch() 函式遵循重定向回應。因此，您可以在 fetch() 回應中使用 Response.redirected 和 Response.url 屬性來手動重新導向使用者。

工作範例：

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
  redirect: 'follow'
})
.then(res => {
  if (res.redirected) {
    window.location.href = res.url;
  } else {
    // Handle non-redirect responses
  }
})

選項 2：傳回帶有重新導向 URL 的 JSON 回應

或者，後端可以傳回包含重新導向 URL 的 JSON 回應。在前端，您可以檢查回應中的“url”鍵並相應地重新導向使用者。

工作範例：

fetch('http://localhost:8000/login', {
  method: 'POST',
  headers: { ... },
  body: { ... },
})
.then(res => res.json())
.then(data => {
  if (data.url) {
    window.location.href = data.url;
  } else {
    // Handle non-redirect responses
  }
})

選項 3：使用 HTML

如果不需要使用 fetch()，您可以使用帶有提交按鈕的傳統 HTML 表單。提交表單時，如果伺服器傳回 RedirectResponse，瀏覽器將自動處理重新導向。