Как дать сеансу простой в угловых 6?

Question

Мы поддерживаем сеанс на основе роли пользователя.Мы хотим реализовать функцию тайм-аута, когда сессия простаивает в течение 5 минут.Для этого мы используем модуль @ ng-idle / core npm.

Файл моей службы:

 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 секунд, но это не такпроисходит.Кто-нибудь может подсказать мне, как это сделать?

Answer 1

Опция: 1: angular-user-idle .

Логика

• Библиотека ожидает неактивного пользователя в течение 1 минуты (60 секунд).

• Если обнаружены неактивные, то onTimerStart() срабатывает и
  возвращает обратный отсчет в течение 2 минут (120 секунд).

• Если пользователь не остановил таймер с помощью stopTimer (), то время истекло через 2 минуты (120 секунд) и onTimeout () сработало.

В AppModule:

@NgModule({
      imports: [
        BrowserModule,

        // Optionally you can set time for `idle`, `timeout` and `ping` in seconds.
        // Default values: `idle` is 600 (10 minutes), `timeout` is 300 (5 minutes) 
        // and `ping` is 120 (2 minutes).
        UserIdleModule.forRoot({idle: 600, timeout: 300, ping: 120})
      ],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
    })

In any of your core componets:

    ngOnInit() {
        //Start watching for user inactivity.
        this.userIdle.startWatching();

        // Start watching when user idle is starting.
        this.userIdle.onTimerStart().subscribe(count => console.log(count));

        // Start watch when time is up.
        this.userIdle.onTimeout().subscribe(() => console.log('Time is up!'));
      }

Бонус: Вы можете использовать «ping», чтобы сделать запрос на обновление токена в заданный интервал времени (например, каждые 10 минут).

Опция: 2: Использование ngrx

Пожалуйста, обратитесь к статье в ссылке: https://itnext.io/inactivity-auto-logout-w-angular-and-ngrx-3bcb2fd7983f

Answer 2

Вы можете использовать bn-ng-idle npm для определения времени простоя пользователя / тайм-аута в угловых приложениях.

npm install bn-ng-idle

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

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

В приведенном выше примере я вызвал метод startWatching(timeOutSeconds)с 300 секунд (5 минут) и подпиской на наблюдаемое, когда пользователь простаивает в течение пяти минут, тогда метод подписки будет вызван со значением параметра res (который является логическим) как true.

Проверяя, является ли res истинным или нет, вы можете показать диалоговое окно или сообщение о тайм-ауте сеанса.Для краткости я просто записал сообщение на консоль.