会话超时在 Angular 6 中保持调用函数

Question

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

Answer 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 的会话活动

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

会话超时在 Angular 6 中保持调用函数

Session Timeout keeps calling function in Angular 6

javascript

angular

typescript

session-timeout