Wie leite ich Benutzer nach der Anmeldung mithilfe der JavaScript-Abruf-API um?

Wie leite ich den Benutzer nach der Anmeldung mit der JavaScript-Abruf-API auf eine andere Seite um?

Problem

Bei Verwendung des folgenden JavaScript-Codes ist das Authentifizierungstoken zuerst mit der Methode firebase.auth() abgerufen. Anschließend wird eine POST-Anfrage an das FastAPI-Backend gestellt. Wenn das Token gültig ist, wird eine Umleitungsantwort zurückgegeben. Der Benutzer wird jedoch nicht tatsächlich umgeleitet und die Originalseite bleibt geladen.

<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>

Lösung: Option 1 – RedirectResponse zurückgeben

Standardmäßig legt die fetch()-Methode in JavaScript die fest Umleitungsmodus folgen, was bedeutet, dass der Benutzer nicht auf eine neue Seite umgeleitet wird, sondern die Umleitungsantwort stattdessen automatisch im Hintergrund verarbeitet wird. Wenn Sie die Umleitung manuell durchführen möchten, können Sie den Umleitungsmodus auf „Manuell“ festlegen und dann die Eigenschaften „Response.redirected“ und „Response.url“ verwenden, um die Umleitungs-URL abzurufen und den Benutzer selbst mithilfe von „window.location.href“ oder „window“ zu dieser URL umzuleiten .location.replace().

Lösung: Option 2 – JSON-Antwort mit der Weiterleitungs-URL zurückgeben

Anstatt eine RedirectResponse vom Server zurückzugeben, können Sie eine normale JSON-Antwort mit der URL zurückgeben im JSON-Objekt enthalten. Überprüfen Sie auf der Clientseite, ob das vom Server zurückgegebene JSON-Objekt den URL-Schlüssel enthält. Wenn ja, rufen Sie dessen Wert ab und leiten Sie den Benutzer mithilfe von window.location.href oder window.location.replace() zu dieser URL weiter.

Lösung: Option 3 – Verwendung von HTML

im Frontend

Wenn die Verwendung einer fetch()-Anfrage für Ihr Projekt nicht erforderlich ist, sollten Sie die Verwendung eines normalen HTML- in Betracht ziehen. und lassen Sie den Benutzer auf eine Senden-Schaltfläche klicken, um die POST-Anfrage an den Server zu senden. Die Verwendung einer RedirectResponse auf der Serverseite würde dazu führen, dass der Benutzer beim Absenden des Formulars automatisch zur Ziel-URL weitergeleitet wird.

Das obige ist der detaillierte Inhalt vonWie leite ich Benutzer nach der Anmeldung mithilfe der JavaScript-Abruf-API um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!