检测关闭浏览器事件 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

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

@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 并使用异步方法直接注销用户。

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

@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

检测关闭浏览器事件 angular 12

Detect event of closing browser angular 12

browser

firefox

google-chrome

angular