Route to URL with javascript fetch method

Question

My question seems pretty basic, but I came across a lot of documentation and question on this forum without getting any proper way to get the work done.

I have a secured webapp, in which I handle redirections programatically to send authentification headers with each request. Thus, instead of href links, I have buttons, which trigger the following function :

route_accessor.mjs

const access = (path = '') => {
    const token = localStorage.getItem('anov_auth_token');
    const dest = `http://localhost:8080/${path}`;

    const headers = new Headers();
    if (token) headers.append('authorization', token);

    fetch(
        dest,
        {
            method: 'GET',
            headers,
            mode: 'cors',
            redirect: 'follow'
        }
    )
        .then(response => {
            if (response.url.includes('error/403')) {
               localStorage.removeItem('anov_auth_token');
            }

            // Here I need to redirect to the response page
        })
        .catch(error => {
            console.error(error);
        });
};

export default access;

Then, I have NodeJs backend, which determines where I should go, either :

• My requested page
• A 403 page (if I sent a wrong token)
• Login page (if I havent sent any token)

Backend works perfectly so far. The problem is, once I made my request, I can't display the result as I'd like. Here is what I tried. The following code takes place where I put a comment inside route_accessor.mjs.

Using window.location

window.location.href = response.url;

I tried every variant, such as window.location.replace(), but always went into the same issue : those methods launch a second request to the requested url, without sending the headers. So I end up in an infinite 403 redirection loop when token is acceptable by my server.

I tried methods listed in the following post : redirect after fetch response

Using document.write()

A second acceptable answer I found was manually updating page content and location. The following almost achieve what I want, with a few flaws :

response.text().then(htmlResponse => {
  document.open();
  document.write(htmlResponse);
  document.close();

  // This doesn't do what I want, event without the second argument
  window.document.dispatchEvent(new Event("DOMContentLoaded", {
    bubbles: true,
    cancelable: true
  }));
});

With this, I get my view updated. However, URL remains the same (I want it to change). And though every script is loaded, I have few DOMContentLoaded event to make my page fully functionnal, but they aren't triggered, at all. I can't manage to dispatch a new DOMContentLoaded properly after my document is closed.

Some other minor problems come, such as console not being cleared.

Conclusion

I am stuck with this issue for quite a time right now, and all my researches havent lead me to what I am looking for so far. Maybe I missed an important point here, but anyway...

This only concerns get requests.

Is their a proper way to make them behave like a link tag, with a single href, but with additional headers ? Can I do this only with javascript or is their a limitation to it ?

Thanks in advance for any helpful answer !