I want to render a new HTML page on user request, which is only accessible if the authorization header is set correctly. I initially thought that the browser would redirect to the page, but found out that this is not the case. I have found some ways to handle this, for example replacing the DOM, but I don't think that is a good solution.

Here is the fetch call from UI, which returns the HTML, but does not render it currently:

fetch('/protected_route', {
  headers: {
    'authorization': 'Bearer ' + sessionStorage.getItem('token')
  }
}).then(response => {
  // What to do with the response
});

Here is the server code, if that helps:

app.get('/protected_route', (req, res) => {
  const bearer = req.headers['authorization'];

  if(typeof bearer === 'undefined') {
    res.json({message: 'Not logged in'});
  }
  else {
    const token = bearer.split(' ')[1];

    jwt.verify(token, config.secret, (error, data) => {
      if(error) {
        res.json({message: 'Error verifying token'});
      }
      else {
        res.render('protected_route');
      }
    });
  }
});

I want to render a new HTML page on user request, which is only accessible if the authorization header is set correctly. I initially thought that the browser would redirect to the page, but found out that this is not the case. I have found some ways to handle this, for example replacing the DOM, but I don't think that is a good solution.

Here is the fetch call from UI, which returns the HTML, but does not render it currently:

fetch('/protected_route', {
  headers: {
    'authorization': 'Bearer ' + sessionStorage.getItem('token')
  }
}).then(response => {
  // What to do with the response
});

Here is the server code, if that helps:

app.get('/protected_route', (req, res) => {
  const bearer = req.headers['authorization'];

  if(typeof bearer === 'undefined') {
    res.json({message: 'Not logged in'});
  }
  else {
    const token = bearer.split(' ')[1];

    jwt.verify(token, config.secret, (error, data) => {
      if(error) {
        res.json({message: 'Error verifying token'});
      }
      else {
        res.render('protected_route');
      }
    });
  }
});

• javascript
• html
• node.js
• express
• fetch-api

Share Improve this question Follow edited Mar 18, 2022 at 8:39 VLAZ 29.2k99 gold badges6363 silver badges8484 bronze badges asked Nov 19, 2018 at 20:42 leonphilleonphil 2511 gold badge11 silver badge44 bronze badges 2

• 3 fetch runs an HTTP request but it's meant to municate with the server without leaving the current page. Since you're handling the authorization manually anyway, why not use a cookie instead? That way you can check the cookie in your /protected_route handler, then simply use an <a> to let the user move to the page. – user5734311 Commented Nov 19, 2018 at 20:47
• @ChrisG Thanks for the answer! I actually did not consider that option. I just redirected the user with window.location.href=path and it works now. – leonphil Commented Nov 19, 2018 at 21:01

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The problem you are facing is when you tried to open a new HTML page and send back an html file via res.render(), this will send HTML content back to request. When using API call via AJAX or fetch or request or any other API client they are developed for single page application and these calls prohibits browser from rendering to new html page. API calls from such sources process over data and browser have no control over response received.

If you need to render another HTML page than use form-submit to call API, as this is the only way that let browser act upon response, and display response in new page. Since res.render() returned HTML file content, thus a new page act like a file is opened.

If you want to use single page application then you had to process over HTML received in response and then replace whole loaded HTML with new one, you had to make changes in DOM if need to use some API call module.

You can check this github project explaining all basic front-end and backend links for starters.

I was able to render a new page using form submit. I tried this before with fetch with no luck.

const form = document.createElement('form');
form.action = '/employee-portal/get-schedules-for-viewing' 
form.method = 'POST';
const id = collegeSched[index].id
let formData = new FormData(form);
formData.append('schedID', id)

document.body.appendChild(form)

form.submit()

document.body.removeChild(form)

The only way to solve it I've found is using document.write(data). This statement result in rendering the received page but inside the same document, not changing the browser window to the new page and not including a new enter in the history of the browser