How does Angular differentiate between refresh event and close browser/close tab event?

Question

How does Angular differentiate between refresh event and close browser/close tab event?

I tried to listen to the event beforeunload, but I found that this event is fired whether I refresh the web page or close the browser

@HostListener('window:beforeunload', ['$event'])
  public beforeunloadHandler() {
  console.log('Click the refresh page button, or close the browser, this time will be called ');
}

The desired effect: I need to send a request when closing the browser: clear the token on the server side, but when refreshing the webpage, I don't want to trigger the request to clear the token, how can I distinguish between the refresh webpage event and the browser close event?

Answer 1

Simple answer is that you can't distinguish them. To the browser their all unload events (either it's actually refresh, closing the tab, or closing the browser).

For this reason, most commonly session is kept alive by updating it. And when it doesn't receive any more updates after certain period, then the session is terminated.

Have your backend keep the token alive, and make the frontend update it (e.g on mouse move or when making http calls) whatever the function should be on the frontend that's letting backend know, token should be kept alive.