Comment rediriger les utilisateurs après la connexion à l'aide de l'API JavaScript Fetch ?

Comment rediriger l'utilisateur vers une autre page après la connexion à l'aide de l'API JavaScript Fetch ?

Problème

En utilisant le code JavaScript ci-dessous, le jeton d'authentification est obtenu pour la première fois à l'aide de la méthode firebase.auth(). Une requête POST est ensuite adressée au backend FastAPI. Si le jeton est valide, une réponse de redirection est renvoyée. Cependant, l'utilisateur n'est pas réellement redirigé et la page d'origine reste chargée.

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

Solution : Option 1 - Renvoyer la réponse de redirection

Par défaut, la méthode fetch() en JavaScript définit la mode de redirection à suivre, ce qui signifie que l'utilisateur ne sera pas redirigé vers une nouvelle page mais que la réponse de redirection sera gérée automatiquement en coulisses. Si vous souhaitez gérer manuellement la redirection, vous pouvez définir le mode de redirection sur manuel, puis utiliser les propriétés Response.redirected et Response.url pour obtenir l'URL de redirection et rediriger vous-même l'utilisateur vers cette URL à l'aide de window.location.href ou window. .location.replace().

Solution : Option 2 - Renvoi d'une réponse JSON contenant l'URL de redirection

Au lieu de renvoyer une RedirectResponse du serveur, vous pouvez renvoyer une réponse JSON normale avec l'URL inclus dans l'objet JSON. Côté client, vérifiez si l'objet JSON renvoyé par le serveur inclut la clé url, et si oui, récupérez sa valeur et redirigez l'utilisateur vers cette URL en utilisant window.location.href ou window.location.replace().

Solution : Option 3 - Utiliser HTML

dans le frontend

Si l'utilisation d'une requête fetch() n'est pas une exigence pour votre projet, envisagez d'utiliser un HTML normal. et demandez à l'utilisateur de cliquer sur un bouton de soumission pour envoyer la requête POST au serveur. L'utilisation d'une RedirectResponse côté serveur entraînerait la redirection automatique de l'utilisateur vers l'URL cible lorsque le formulaire est soumis.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!