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

Im bereitgestellten Code die JavaScript-fetch()-Methode wird verwendet, um eine POST-Anfrage mit einem von Google erhaltenen Token an einen Backend-Endpunkt zu senden. Bei der Validierung des Tokens im Backend wird eine RedirectResponse mit dem Statuscode 303 zurückgegeben. Die Umleitung erfolgt jedoch nicht im Browser.

Option 1: RedirectResponse zurückgeben

Die Funktion fetch() folgt standardmäßig Umleitungsantworten. Daher können Sie die Eigenschaften Response.redirected und Response.url in der fetch()-Antwort verwenden, um den Benutzer manuell umzuleiten.

Arbeitsbeispiel:

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

Option 2: JSON-Antwort mit Umleitungs-URL zurückgeben

Alternativ kann das Backend eine JSON-Antwort mit der Umleitungs-URL zurückgeben. Im Frontend können Sie nach dem „URL“-Schlüssel in der Antwort suchen und den Benutzer entsprechend umleiten.

Arbeitsbeispiel:

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

Option 3: Verwenden von HTML

Wenn die Verwendung von fetch() nicht erforderlich ist, können Sie ein herkömmliches HTML-Formular mit einer Senden-Schaltfläche verwenden. Wenn das Formular gesendet wird, verarbeitet der Browser die Umleitung automatisch, wenn eine RedirectResponse vom Server zurückgegeben wird.