我在我的角度客户端中实现了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() {
}
}
我希望登录页面没有空闲监视实现,因为它是系统的入口点。我需要在哪里纠正才能获得理想的结果?