moribvndvs / ng2-idle

Responding to idle users in Angular (not AngularJS) applications.
https://moribvndvs.github.io/ng2-idle
Apache License 2.0
315 stars 128 forks source link

How to handle this after the user login #108

Open santhoshrajuvysyaraju opened 5 years ago

santhoshrajuvysyaraju commented 5 years ago

Hi,

I Want to Apply ng2-idle after the user login. is it possible to apply ng2-idle with conditions. If at all user is not logged in then set the time to infinite.

Help me to solve the issue.

Thanks in advance.

firrib commented 5 years ago

What I did is put ng2Idle in a service. This service does all the preliminary setup (for example, assigning setIdle/setTimeout/etc. and subscribing to the onIdleStart/onIdleEnd/etc) in its constructor. The service also has public startIdleSvc, stopIdleSvc, and isServiceRunning functions.

Then, in my app.module.ts, I subscribe to the router.events observable and filter out only the RouterEvents. Then, in the subscribe, I check if the user is logged in. If the user is logged in and the idle service hasn't been started already (checking by calling the service's isServiceRunning), I start the idle service. If the user isn't logged in, and the idle service is still running (ie the user logs out on his own), I call the stopUserService function.

The reason I do the router check and not start the service just when the user logs in is because the user can manually reload the page, and when that happens the user is still logged in, but the idle service has been stopped. With the router checks, this scenario is taken care of.

There may be better ways to do this so if someone knows of one, please comment.

Here is part of my app.module.ts:

import { NgModule } from '@angular/core';
import { Router, RouterEvent } from '@angular/router';
import { filter } from 'rxjs/operators';
import { AuthenticationService, IdleService } from './_services';
............
export class AppModule { 
  constructor(
    router: Router,
    authenticationService: AuthenticationService,
    idleService: IdleService
    ) {

    //Make sure to start/stop idle service as necessary
    router.events.pipe(
      filter(e => e instanceof RouterEvent)
    ).subscribe(e => {
      //NOTE: You will need to replace authenticationService.currentUserValue
      //with your own way of checking if the user is logged in
      if (authenticationService.currentUserValue) { //logged in
        if (!idleService.isServiceRunning()) {
          idleService.startIdleSvc();
        }
      } else {
        if (idleService.isServiceRunning()) {
          idleService.stopIdleSvc();
        }
      }
    });    
  }

A derivative of my idle.service.ts:

import { Injectable } from '@angular/core';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Router } from '@angular/router';

//NOTE: You'll need to provide your own authentication service
import { AuthenticationService } from './authentication.service';

@Injectable({ providedIn: 'root' })
export class IdleService {
  private isSetUp: boolean = false;

  constructor(
    private idle: Idle, 
    private router: Router,
    private authenticationService: AuthenticationService,
  ) { 
    this.setup();
  }

  /**
   * Checks to see if idle service is currently running
   */
  isServiceRunning() {
    return this.idle.isRunning();
  } //End of method isServiceRunning

  /**
   * Starts the idle service
   */
  startIdleSvc() {
    if (this.idle.isRunning()) { //Already running
      this.idle.stop();
    }

    this.idle.watch();
  } //End of method startIdleSvc

  /**
   * Stops the idle services
   */
  stopIdleSvc() {
    this.idle.stop();
  } //End of method stopIdleSvc

  /************************
   * Private methods
   */
  /**
   * Sets up the idle service
   */
  private setup() {
    if (!this.isSetUp) {
      let idleStartSec:number = 5;
      let timeoutPeriodSec:number = 5;

      // sets an idle timeout - will trigger timeout period
      this.idle.setIdle(idleStartSec);
      // sets a timeout period. after this amount of inactivity, the user will be considered timed out.
      this.idle.setTimeout(timeoutPeriodSec);
      // sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
      this.idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);

      this.idle.onTimeout.subscribe(() => {
        this.authenticationService.logout();
        this.router.navigate(['/login']);
      });

      this.isSetUp = true;
    } //End of (if (!this.isSetUp))
  } //End of method setup

}