angular - 检测关闭浏览器 Angular 12 的事件

Question

我必须检测关闭浏览器事件，以便关闭用户的连接。 我尝试了以下方法:

@HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event) {
    /**
     * Post a single object to the server
     * Send Beacon API to keep request after browser windowunload event
     */
    navigator.sendBeacon(`${this.appConfigService.appConfig.apiUrl}/Account/LogoutDirectly/`);
  }

在我的 app.component.ts 上。 我在 Chrome 和 Firefox 上都试过了。但它不会触发任何东西。

资源如下:

Angular 8 HostListener 'window:unload' how to make API call before unload

Prevent closing browser tab/window in Angular 5.x

Answer 1

解决方案 1: 我已将我的代码更改为以下内容:

@HostListener('window:beforeunload')
  async ngOnDestroy() {
    
    const userId = this.authenticationService.user?.profile?.sub; // get user id
    await this.userService.closeConnection(userId).toPromise(); // sign out user
    
  }

实现 ngOnDestroy 并使用异步方法直接注销用户。

解决方案 2: 您还可以使用以下代码来检测标签何时被隐藏并触发您的代码:

@HostListener('document:visibilitychange', ['$event'])
  visibilitychange() {
    this.checkHiddenDocument().then(() => {});
  }

  async checkHiddenDocument() {
    if (document.visibilityState === 'hidden') {
      const userId = this.authenticationService.user?.profile?.sub; // get user id
      if (!this.authenticationService.isRememberLogin() && userId) {
        await this.userService.closeConnections(userId).toPromise();
      }
    } else {
      // add logic
    }
  }

此解决方案由 Mozilla 开发人员推荐，您可以在以下文章中看到:https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon