My problem is that when i call a function who listen to the event onBeforeUnload(), i want to post a data. The problem is that my request is unauthorized. I need to add my bearer somewhere, but i don't know how.

Here my actual code:

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
     navigator.sendbeacon(`${localhost:8080/apiRest}`, infoIWantToSent);
  }

For now, the request send a 401:unhautorized, which is normal, since i don't transmit any bearer.

My problem is that when i call a function who listen to the event onBeforeUnload(), i want to post a data. The problem is that my request is unauthorized. I need to add my bearer somewhere, but i don't know how.

Here my actual code:

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
     navigator.sendbeacon(`${localhost:8080/apiRest}`, infoIWantToSent);
  }

For now, the request send a 401:unhautorized, which is normal, since i don't transmit any bearer.

• javascript
• angular
• typescript

2 Answers 2

I find this solution :

@HostListener('window:beforeunload', ['$event'])
  onBeforeUnload(): void {
   fetch('url', {
        keepalive: true,
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${token}`,
        },
        body: JSON.stringify(infoIWantToSent),
      });
}

Aparently, if we must use a token connexion, we can't use navigator.sendbeacon() https://w3c.github.io/beacon/#sec-sendBeacon-method It work for almost all the cases, but not when i close an iframe which contains my page.

Try this:

  let headers = {
    Authorization: 'Bearer ' + token
  };
  let blob = new Blob([JSON.stringify(infoIWantToSent)], headers);
  navigator.sendBeacon('url', blob);