我使用 Angular 作为前端,C# 作为应用程序的后端,当我关闭 Chrome 选项卡时显示“离开站点”弹出窗口
当我点击离开按钮时,我需要触发一个API,当我点击取消时,API不应该触发强调文本
我的代码是
@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));
}
}
我在 navigator.sendBeacon 和后端 api 中保持调试。
当我单击离开按钮时,UI 调试正在命中,但选项卡立即关闭,后端调试未命中,并且 api 未触发
您不能这样做,因为浏览器不会等待 API 关闭,而是将令牌存储在会话存储中,以便在选项卡关闭时将其清除。您可以在弹出窗口打开时触发 API,但不能在弹出窗口关闭并确认时触发。
另一种方法是将过期时间存储在 JWT 中,使其在一定时间后过期。