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

问题描述 投票:0回答:1

我使用 Angular 作为前端,C# 作为应用程序的后端,当我关闭 Chrome 选项卡时显示“离开站点”弹出窗口

enter image description here

当我点击离开按钮时,我需要触发一个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 未触发

angular api google-chrome navigator window.onunload
1个回答
0
投票

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

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

© www.soinside.com 2019 - 2024. All rights reserved.