关闭最后一个选项卡后重定向到注销 link

Question

根据要求，我必须在用户关闭浏览器上的最后一个选项卡时注销用户。

    ngOnInit() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        counter ? ++counter : (counter = '1');
        this.cookieService.set('screenCounterCookie', counter);
    }


    @HostListener('window:beforeunload', ['$event'])
    ngOnDestroy() {
        let counter: any = this.cookieService.get('screenCounterCookie');
        if (counter > 1) {
            --counter;
            this.cookieService.set('screenCounterCookie', counter);
        } else {
            this.cookieService.delete('screenCounterCookie');
            window.open(environment.cognitoLogoutURL);
        }
    }

行为不稳定。有时它会减少计数器，有时不会。另外，我必须在这里处理刷新、多个选项卡关闭和浏览器关闭逻辑。

我该如何实施？

Answer 1

我能想到的唯一可靠的实现方式是使用 websockets 和 keep-alive 的概念。或者手动定期戳服务器以重置计时器，如果计时器用完将注销用户。

您不能以跨平台方式信任浏览器以允许您在浏览器关闭或用户断电时触发事件。

Answer 2

我在不使用 ngOnDestroy 的情况下改进了您的逻辑。我试过了，似乎有效。

import { Component } from '@angular/core'

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor() {
    const counter = localStorage.getItem('screenCounterCookie') || 0

    localStorage.setItem('screenCounterCookie', (Number(counter) + 1).toString())

    window.addEventListener('beforeunload', () => {
      const counter: number = Number(localStorage.getItem('screenCounterCookie')) - 1
      localStorage.setItem('screenCounterCookie', counter.toString())

      if (counter <= 0) {
        localStorage.removeItem('screenCounterCookie')
        console.log('logout')
        // Your logout
      }
    })
  }
}

Answer 3

统计标签总数：https://jsbin.com/mipanuro/1/edit?html,js,output（参考）

方法 1（将进行 POST 调用）：

使用 BeaconAPI (navigator.sendBeacon())。这将在后台发生。

方法 2（也适用于 GET 调用）：

使用 fetch 和 keep-alive

方法 3（Websocket）：

每隔几分钟左右 Ping 一次您的后端。如果没有 ping，后端可能会使您的会话无效。

关闭最后一个选项卡后重定向到注销 link

Redirect to logout link after closing the last tab

angular

typescript

logout

ngondestroy