如何防止ng-idle在Angular的登录页面中观看

时间:2019-04-11 09:50:38

标签: angular typescript

我在我的角度客户端中实现了ng-idle watch和Keep-alive,该客户端监视已登录用户的空闲活动。我的问题是,当系统启动时,ng-idle也会在登录页面上工作,这看起来像是某种循环。

该实现在我的app.component.ts中。我的根app.component.ts中的代码如下:

import { Component, ElementRef } from '@angular/core';
import { Router } from '@angular/router';
import { SessionTimeoutService } from './compas/services/session.service';
import { AuthService } from './compas/services/auth.service';
import { MySharedService } from './compas/services/sharedService';
import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
import { Idle, EventTargetInterruptSource } from '@ng-idle/core';
import { MessagingService } from './compas/services/messaging.service';
import { Keepalive } from '@ng-idle/keepalive';
import { ProgressBarModalComponent } from './progressbar-modal.component';
import { Location } from '@angular/common';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'app';
idleState = 'NOT_STARTED';
timedOut = false;
lastPing?: Date = null;
progressBarPopup: NgbModalRef;
currentPath: String;

constructor(private sessionTimeoutService: SessionTimeoutService, private messagingService: MessagingService,
  private authService: AuthService, private element: ElementRef, private idle: Idle, private keepalive: Keepalive,
   private ngbModal: NgbModal, private router: Router, private globalService: MySharedService) {


  // // sets an idle timeout of 15 minutes.
   idle.setIdle(180);
  // // sets a timeout period of 5 minutes.
   idle.setTimeout(300);
  // sets the interrupts like Keydown, scroll, mouse wheel, mouse down, and etc
  idle.setInterrupts([
    new EventTargetInterruptSource(
      this.element.nativeElement, 'keydown DOMMouseScroll mousewheel mousedown touchstart touchmove scroll')]);

  idle.onIdleEnd.subscribe(() => {
    this.idleState = 'NO_LONGER_IDLE';
  });

  idle.onTimeout.subscribe(() => {
    this.idleState = 'TIMED_OUT';
    this.timedOut = true;
    this.closeProgressForm();
  });

  idle.onIdleStart.subscribe(() => {
    this.idleState = 'IDLE_START', this.openProgressForm(1);
  });

  idle.onTimeoutWarning.subscribe((countdown: any) => {
    this.idleState = 'IDLE_TIME_IN_PROGRESS';
    this.progressBarPopup.componentInstance.count = (Math.floor((countdown - 1) / 60) + 1);
    this.progressBarPopup.componentInstance.progressCount = this.reverseNumber(countdown);
    this.progressBarPopup.componentInstance.countMinutes = (Math.floor(countdown / 60));
    this.progressBarPopup.componentInstance.countSeconds = countdown % 60;
  });

  // sets the ping interval to 15 seconds
  keepalive.interval(15);
  /**
   *  // Keepalive can ping request to an HTTP location to keep server session alive
   * keepalive.request('<String URL>' or HTTP Request);
   * // Keepalive ping response can be read using below option
   * keepalive.onPing.subscribe(response => {
   * // Redirect user to logout screen stating session is timeout out if if response.status != 200
   * });
   */

   this.reset();
}

// tslint:disable-next-line:use-life-cycle-interface
ngOnDestroy() {
  this.resetTimeOut();
  this.logout();
}

reverseNumber(countdown: number) {
  return (300 - (countdown - 1));
}

reset() {
  this.idle.watch();
  this.idleState = 'Started.';
  this.timedOut = false;
}

openProgressForm(count: number) {
  this.progressBarPopup = this.ngbModal.open(ProgressBarModalComponent, {
    backdrop: 'static',
    keyboard: false
  });
  this.progressBarPopup.componentInstance.count = count;
  this.progressBarPopup.result.then((result: any) => {
    if (result !== '' && 'logout' === result) {
      this.logout();
    } else {
      this.reset();
    }
  });
}

logout() {
  // localStorage.removeItem('session');
  this.authService.logout(this.globalService.username).subscribe(data => {
    console.log('User logged out');
  }, (err) => {
    console.log('error logging out');
  });
  this.router.navigate(['/auth']);
  this.globalService.setAuth(false);
  localStorage.removeItem('otc');
  this.resetTimeOut();
}

closeProgressForm() {
  this.progressBarPopup.close();
  this.authService.logout(this.globalService.username).subscribe(data => {
    console.log('User logged out');
  }, (err) => {
    console.log('error logging out');
  });
  this.router.navigate(['/auth']);
}

resetTimeOut() {
  this.idle.stop();
  this.idle.onIdleStart.unsubscribe();
  this.idle.onTimeoutWarning.unsubscribe();
  this.idle.onIdleEnd.unsubscribe();
}

// tslint:disable-next-line:use-life-cycle-interface
ngOnInit() {
}
}

我希望登录页面没有空闲监视实现,因为它是系统的入口点。我需要在哪里纠正才能获得理想的结果?

0 个答案:

没有答案