4

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

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

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

我该如何实施？

4

3 回答 3

3

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

方法一（会POST打电话）：

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

方法 2（也适用于GETCall）：

使用fetch和keep-alive

方法3（Websocket）：

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

于 2021-03-22T19:59:11.160 回答
1

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

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

于 2021-03-19T12:59:39.320 回答
1

在不使用 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
      }
    })
  }
}
于 2021-03-19T15:39:43.767 回答