关闭最后一个选项卡后重定向到注销链接答案

【问题标题】：Redirect to logout link after closing the last tab关闭最后一个选项卡后重定向到注销链接
【发布时间】：2021-06-12 11:53:27
【问题描述】：

根据要求，当他关闭浏览器上的最后一个标签时，我必须注销用户。

    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);
        }
    }

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

我该如何实现它？

【问题讨论】：

我觉得这个答案会是很好的提示：stackoverflow.com/a/23692090/390161
该链接确实很有用。它帮助我保持了一个柜台。问题是window.open() 没有被触发。
请注意，这永远不会在所有情况下都有效

标签： angular typescript logout ngondestroy

【解决方案1】：

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

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

【讨论】：

【解决方案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
      }
    })
  }
}

【讨论】：

【解决方案3】：

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

方法1（将拨打POST）：

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

方法 2（也适用于 GET 呼叫）：

使用fetch 和keep-alive

方法3（Websocket）：

每隔几分钟左右对您的后端进行 Ping。如果没有 ping，后端会使您的会话无效。

【讨论】：