JavaScript Fetch API を使用してログイン後にユーザーを別のページにリダイレクトする方法

提供されているコードでは、JavaScript fetch() メソッドGoogle から取得したトークンを使用してバックエンド エンドポイントに POST リクエストを送信するために使用されます。バックエンドでトークンが検証されると、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 が返された場合、ブラウザーは自動的にリダイレクトを処理します。