JavaScript Fetch API を使用してログイン後にユーザーをリダイレクトするにはどうすればよいですか?

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

問題

以下の JavaScript コードを使用すると、認証トークンは次のようになります。最初に firebase.auth() メソッドを使用して取得されます。次に、POST リクエストが FastAPI バックエンドに対して行われます。トークンが有効な場合、リダイレクト応答が返されます。ただし、ユーザーは実際にはリダイレクトされず、元のページは読み込まれたままになります。

<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 応答を返す

サーバーから RedirectResponse を返す代わりに、URL を含む通常の JSON 応答を返すことができます。 JSON オブジェクトに含まれます。クライアント側では、サーバーから返された JSON オブジェクトに URL キーが含まれているかどうかを確認し、含まれている場合はその値を取得し、window.location.href または window.location.replace() を使用してユーザーをその URL にリダイレクトします。

解決策: オプション 3 - HTML

を使用するフロントエンドで

fetch() リクエストの使用がプロジェクトの要件ではない場合は、通常の HTML の使用を検討してください。ユーザーに送信ボタンをクリックして POST リクエストをサーバーに送信してもらいます。サーバー側で RedirectResponse を使用すると、フォームの送信時にユーザーが自動的にターゲット URL にリダイレクトされます。

以上がJavaScript Fetch API を使用してログイン後にユーザーをリダイレクトするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。