如何在角度 6 中给出会话空闲超时? [英] How to give session idle timeout in angular 6?

问题描述

我们正在维护基于用户角色的会话.我们希望在会话空闲 5 分钟时实现超时功能.我们正在使用 @ng-idle/core npm 模块来做到这一点.

We are maintaining a session based on user role. We want to implement timeout functionality when the session is idle for 5 min. We are using @ng-idle/core npm module to do that.

我的服务文件:

 import { ActivatedRouteSnapshot } from '@angular/router';
 import { RouterStateSnapshot } from '@angular/router';
 import {Idle, DEFAULT_INTERRUPTSOURCES, EventTargetInterruptSource} from 
 '@ng-idle/core';
 @Injectable()
export class LoginActService implements CanActivate {
constructor(private authService: APILogService, private router: 
 Router,private idle: Idle) {
  idle.setIdle(10);
  idle.setTimeout(10);
 }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot
 ): Observable<boolean>|Promise<boolean>|boolean {
let role = localStorage.getItem('currentUser');

if (localStorage.getItem('currentUser')) {
  if(next.data[0] == role){
   },600000) 
    return true;
  } 
}
else{
  this.router.navigate(['/'], { queryParams: { returnUrl: state.url }});
  return false;
  }
 }
}

例如，我使用 setIdle timeout 5 秒，但它没有发生.有人可以指导我如何做到这一点吗?

For sample, I have used setIdle timeout for 5 seconds, But it is not happening. Can somebody guide me how to do this?

推荐答案

您可以使用 bn-ng-idle npm 用于角应用程序中的用户空闲/会话超时检测.这篇博文解释将帮助你 了解如何在 Angular 中处理用户空闲和会话超时

You can use bn-ng-idle npm for user idle / session timeout detection in angular apps. This blog post explanation will help you Learn how to Handle user idleness and session timeout in Angular

npm install bn-ng-idle

app.module.ts

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BnNgIdleService } from 'bn-ng-idle'; // import bn-ng-idle service


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [BnNgIdleService], // add it to the providers of your module
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts

app.component.ts

import { Component } from '@angular/core';
import { BnNgIdleService } from 'bn-ng-idle'; // import it to your component

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  constructor(private bnIdle: BnNgIdleService) { // initiate it in your component constructor
    this.bnIdle.startWatching(300).subscribe((res) => {
      if(res) {
          console.log("session expired");
      }
    })
  }
}

在上面的例子中，我用 300 秒(5 分钟) 调用了 startWatching(timeOutSeconds) 方法并订阅了 observable，一旦用户空闲了五分钟后，将调用 subscribe 方法，并将 res 参数的值(它是一个布尔值)设为 true.

In the above example, I have invoked the startWatching(timeOutSeconds) method with 300 seconds (5 minutes) and subscribed to the observable, once the user is idle for five minute then the subscribe method will get invoked with the res parameter's value (which is a boolean) as true.

通过检查 res 是否为真，您可以显示会话超时对话框或消息.为简洁起见，我只是将消息记录到控制台.

By checking whether the res is true or not, you can show your session timeout dialog or message. For brevity, I just logged the message to the console.

这篇关于如何在角度 6 中给出会话空闲超时?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！