How to trigger API, on Leave site ? popup

I'm using angular as front end and C# for backend for application, When I close tab chrome showing Leave Site popup



When I click the Leave button, I need to trigger an API, when I click cancel, api should not triggeremphasized text

my code is

@HostListener('window:unload', ['$event'])
unloadHandler($event) {
this.LogOutByTabClose($event);
}

LogOutByTabClose($event) {

const logoutData = {
"UserId": UserService.UserId,
"UserName": UserService.UserName,
"DisplayName": UserService.DisplayName,
"Apptype": UserService.Apptype,
"Machinename": UserService.MachineName,
"ConnectionString": null,
"LogoutfromAll": false,
"isUserUnlocked": ""
};
if (navigator.sendBeacon) {
const logouturl = 'http://localhost:64359//api/Shared/LogoutUser';
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('x-token', UserService.AuthToken != null ? UserService.AuthToken : "Undefined");
headers.append('x-session-userid', UserService.UserId + "^" + UserService.DisplayName);
headers.append('x-session-token', UserService.CscToken != null ? UserService.CscToken : "Undefined");

navigator.sendBeacon(logouturl, JSON.stringify(logoutData));
}
}


I kept debug in navigator.sendBeacon and api in backend.

when I click Leave button, UI debug is hitting, but immediately tab is closed, backend debug is not hitting, and api is not triggered

Continue reading...