¿Cómo dar tiempo de espera inactivo a la sesión en angular 6?

Solución:

Puede usar bn-ng-idle npm para la detección de inactividad / tiempo de espera de sesión del usuario en aplicaciones angulares. La explicación de esta publicación de blog lo ayudará a aprender cómo manejar la inactividad del usuario y el tiempo de espera de la sesión en Angular

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

En el ejemplo anterior, he invocado el startWatching(timeOutSeconds) método con 300 segundos (5 minutos) y suscrito al observable, una vez que el usuario esté inactivo durante cinco minutos, el método de suscripción se invocará con el valor del parámetro res (que es un booleano) como verdadero.

Al verificar si la res es verdadera o no, puede mostrar el cuadro de diálogo o mensaje de tiempo de espera de la sesión. Por brevedad, acabo de registrar el mensaje en la consola.

Opción 1: angular-usuario-inactivo.

Lógica

• La biblioteca está esperando a que un usuario esté inactivo durante 1 minuto (60 segundos).

• Si se detectan inactivos, onTimerStart() es despedido y
  devolviendo una cuenta regresiva durante 2 minutos (120 segundos).

• Si el usuario no detuvo el temporizador con stopTimer (), el tiempo se agota después de 2 minutos (120 segundos) y onTimeout () se activa.

En 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!'));
      }

Prima:
Puede utilizar “ping” para solicitar la actualización del token en un intervalo de tiempo determinado (por ejemplo, cada 10 minutos).

Opcion 2: Usando ngrx

Consulte el artículo en el enlace: https://itnext.io/inactivity-auto-logout-w-angular-and-ngrx-3bcb2fd7983f

puede utilizar el código siguiente en el componente principal o principal. Digamos que esto está en el componente principal de administración y supongo que tiene un servicio de autenticación para que pueda saber si el usuario está registrado

declarar variables

   userActivity;
   userInactive: Subject<any> = new Subject();

en el constructor o en ngOnInit add

this.setTimeout();
 this.userInactive.subscribe(() => {
   this.logout();
 });  
 logout() {
 this.authService.logout();
 this.authService.redirectLogoutUser();
}

finalmente agregue los siguientes métodos

    setTimeout() {
    this.userActivity = setTimeout(() => {
      if (this.authService.isLoggedIn) {
        this.userInactive.next(undefined);
        console.log('logged out');
      }
    }, 420000);
  }

  @HostListener('window:mousemove') refreshUserState() {
    clearTimeout(this.userActivity);
    this.setTimeout();
  }

---

---

Utiliza Nuestro Buscador