How to redirect after a fetch() function

Question

I would like to redirect the user to a new webpage after a fetch() function. I use a facebook login button and when the user is authenticated, I would like to redirect him to a new page with his datas. So I would like to know what's the best method to do it.

I thought a window.location + a session variable could work but I'm pretty sure that there is something more correct than this method, something like a redirect function after a then() function.

I tired to use the fetch().then().redirect() but it's not working and what I would like to do is something like ...().redirect(function(userDatas, url){...});

    //this is inside the facebook connection function
          fetch('/connect',options).then(function(response){
              response.json().then(function(value){
                window.location = 'http://localhost:3000/fight.html';
                console.log(value);
              });
                
     //after this function, I would like to go to this fight.html page

So I would like the user arrive to the fight.html page after the FB connection with his datas.

Please have a look at [this answer](https://stackoverflow.com/a/75188418/17865804) — Chris, Apr 07 '23 at 17:03

score 1 · Answer 1 · answered Oct 28 '19 at 16:48

1

You are doing it incorrectly. You are calling .then() on the response of response.json() instead of the main promise chain. Try:

fetch('/connect',options)
    .then(function(response) {
        return response.json();
    })
    .then(function(value) {
        window.location = 'http://localhost:3000/fight.html';
        console.log(value);
    });

answered Oct 28 '19 at 16:48

Jeremy Harris

24,318
13
79
133

Thank you for your answer, it looks cleaner anyway but do you know how I can redirect the user in an other way than using a window.location because I need to pass datas which are in the value variable. I suppose I can add the datas in the url but it's not really safe – Axel Oct 28 '19 at 17:04
You could use local storage or cookies. If the URL is unique to the request, you could generate a hash and pass that in the URL, and store the response associated with the hash in localstorage so when the page loads you can retrieve it. There are a lot of ways to accomplish it. – Jeremy Harris Oct 28 '19 at 18:02

score 1 · Answer 2 · answered Oct 28 '19 at 16:48

1

This should work fine:

window
  .fetch('/connect', options)
  .then(response => response.json())
  .then(value => {
    console.log(value)
    window.location = 'http://localhost:3000/fight.html'
  })

answered Oct 28 '19 at 16:48

coreyward

77,547
20
137
166

Thank you and yes it works but I think I will use the express-session module to pass my datas – Axel Oct 28 '19 at 17:24

score -1 · Answer 3 · answered Oct 28 '19 at 17:01

Meta tag from html might do. To learn more of the meta tag in html, go to https://www.tutorialspoint.com/How-to-redirect-from-an-HTML-page

document.write('<meta http-equiv = "refresh" content = "2; url = https://www.tutorialspoint.com" />'); //if client side
response.end('<meta http-equiv = "refresh" content = "2; url = https://www.tutorialspoint.com" />'); //if server side

I hope I solved the problem for you. If I didn't reply and I'll try again :)

How to redirect after a fetch() function

3 Answers3