会话超时继续在 Angular 6 中调用函数答案

【问题标题】：Session Timeout keeps calling function in Angular 6会话超时继续在 Angular 6 中调用函数
【发布时间】：2020-05-18 08:00:33
【问题描述】：

我是 Angular 的新手，我正在使用 bn-ng-idle 进行会话超时，它工作正常但是，当我将代码放入 ngOnInit 或 Constructor 时，尽管我在甚至不在同一个页面中，所以当我进入员工页面然后被路由到登录页面时，构造函数中的代码由于某种原因不断重复，感谢您的帮助。

employee.component.ts

constructor(private bnIdle: BnNgIdleService, private router: Router){
this.bnIdle.startWatching(5).subscribe((isTimedOut: boolean) => {
    if (isTimedOut) {
      this.router.navigate(['/signin']);
      console.log('session expired');
    }
    return;
  });
}

【问题讨论】：

检查 startWatching 功能。当它完成时会发生什么（5 数字指的是分钟？）它是否将自身重置为其初始值？因为如果这样做，它将继续运行。流程是：您在哪个页面都没有关系。这就是 observables 的重点。
哦，我明白了，实际上当它完成时它会再次开始计数，所以我找到了一个停止计数器的方法，即 stopTimer()，现在该方法被调用了两次，这应该仍然不会发生跨度>
在下面查看我的答案，而不是评论，我为你详细解答了答案。如果你发现它对你有用，请标记为答案，如果它不起作用，请回复什么不起作用，我会尽力帮助你。

标签： javascript angular typescript session-timeout

【解决方案1】：

检查 startWatching 函数。完成后会发生什么（5 数字是指分钟？）它是否将自身重置为其初始值？因为如果这样做，它将继续运行。

不管你在哪个页面。这是 observables 的特征之一。当您注册一个时，它会继续收听。这就是为什么你必须取消订阅（在 ng-destroy 中），否则你会发生内存泄漏。

我不太清楚你想要实现什么是否监视用户自登录以来的过去时间？最好使用代币，并在上面设置时间。

如果您仍想使用您使用的方法，您可以添加一个条件来检查用户是否在员工方面：

例如：

isInEmployee: boolean;

constructor(private bnIdle: BnNgIdleService, private router: Router){

}

ngOnInit() {
  this.isInEmployee = true;

this.bnIdle.startWatching(5).subscribe((isTimedOut: boolean) => {
    if (isTimedOut && isInEmployee) ) {
      this.router.navigate(['/signin']);
      console.log('session expired');
    }
    return;
  });
}


ngOnDestroy() {
this.isInEmployee = false; -> with your method

//but its better to unsubscribe from 'startWatching'

}

但我建议将 JWT 用于 sessionStroage 的任何会话活动

【讨论】：

我正在使用 JWT，是的，您已经阐明了如何实现这一点，而且效果很好，非常感谢。

【解决方案2】：

您需要将订阅存储在订阅变量中以及销毁组件时订阅需要取消订阅。

private sessionSubscription: Subscription;
ngOnInit(): void{
    this.sessionSubscription = this.bnIdle.startWatching(5).subscribe((isTimedOut: boolean) => {
        if (isTimedOut) {
        this.router.navigate(['/signin']);
        console.log('session expired');
        }
        return;
    });
 }

ngOnDestroy(): void {
    if (this.sessionSubscription){
      this.sessionSubscription.unsubscribe();
    }
 }

【讨论】：