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

Dans le code fourni, la méthode JavaScript fetch() est utilisé pour envoyer une requête POST à ​​un point de terminaison backend avec un jeton obtenu auprès de Google. Lors de la validation du jeton dans le backend, une RedirectResponse est renvoyée avec un code d'état de 303. Cependant, la redirection ne se produit pas dans le navigateur.

Option 1 : Renvoyer la RedirectResponse

La fonction fetch() suit les réponses de redirection par défaut. Par conséquent, vous pouvez utiliser les propriétés Response.redirected et Response.url dans la réponse fetch() pour rediriger manuellement l'utilisateur.

Exemple de travail :

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 : Renvoi d'une réponse JSON avec une URL de redirection

Alternativement, le backend peut renvoyer une réponse JSON contenant l'URL de redirection. Sur le frontend, vous pouvez vérifier la clé « url » dans la réponse et rediriger l'utilisateur en conséquence.

Exemple de travail :

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 : Utiliser HTML

Si l'utilisation de fetch() n'est pas requise, vous pouvez utiliser un formulaire HTML traditionnel avec un bouton d'envoi. Lorsque le formulaire est soumis, le navigateur gérera automatiquement la redirection si une RedirectResponse est renvoyée par le serveur.