如何在离开网站时触发API？弹出窗口

Question

我使用 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 未触发

Answer 1

您不能这样做，因为浏览器不会等待 API 关闭，而是将令牌存储在会话存储中，以便在选项卡关闭时将其清除。您可以在弹出窗口打开时触发 API，但不能在弹出窗口关闭并确认时触发。

另一种方法是将过期时间存储在 JWT 中，使其在一定时间后过期。