Okay so this may be a really junior question but I have just started working with react and I don't know much about it.

The thing is: I'm trying to code an ecommerce. To access a certain page of the website (productos), you need a token (to be logged in, authenticated). So the first thing I do in each page (that requires to be logged in) is to check if the user is logged in, and if it is, I take the token and I set it to the header like this:

function Products()
{
Promise.all([
    fetch('http://localhost:3001/login',
    {
      method: 'get',
      headers: new Headers({
        'Authorization': sessionStorage.getItem("token"),
        'Content-Type': 'application/x-www-form-urlencoded'
      })
    }).then(value => value.json()), 
    fetch('http://localhost:3001/productos').then(value => value.json())
  ]).then((value) => {
    console.log(value)
  })
}

The first fetch is working fine, because it sets the header 'authorization' equals to the token of the user, BUT the second fetch doesn't have this header.

I thought that the header would persist... Since it doesn't, when the fetch of products tries to load the data it doesn't do it, because it doesn't have the header 'authorization'...

Could somebody help me out please?