如何在角度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超时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用于角度应用中的用户空闲/会话超时检测.此博客文章说明将帮助您

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)方法并订阅了可观察对象，一旦用户闲置了五分钟，那么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屋！