Question

在我的应用程序中，如果用户闲置20分钟，则页面上会显示会话超时弹出窗口。我将此代码放在app.component.ts中，因此弹出窗口将显示在每个页面上，但是我的问题是我不想将此代码应用于我的登录页面。如何将这部分内容排除在登录页面之外？

我已经考虑过创建一个会话超时服务以注入到其他所有组件中，但是我拥有太多的组件/页面，因此我认为将其放入主app.component.ts和找到一种排除LoginComponent的方法。任何帮助将不胜感激：）

下面是我的app.component.ts

 import {Component, OnInit,ElementRef } from '@angular/core';
 import {NgxSpinnerService } from 'ngx-spinner';
 import {ProgressBarModalComponent} from './progressbar-modal.component';
 import {Router} from '@angular/router'
 import {NgbModal} from '@ng-bootstrap/ng-bootstrap';
 import {NgbModalRef} from '@ng-bootstrap/ng-bootstrap/modal/modal.module';
 import {Idle } from "@ng-idle/core";
 import {Keepalive} from '@ng-idle/keepalive';
 import {LoginComponent } from './login/login.component';
 import {OnDestroy } from '@angular/core';
 import {interval, Subscription } from 'rxjs';
 import {startWith, switchMap } from 'rxjs/operators';
 import {EventTargetInterruptSource} from '@ng-idle/core';
 import {CookieService } from 'ngx-cookie-service';

 @Component({
     selector: 'app-root',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.css']
 })
 export class AppComponent implements OnInit{
  title = 'TxDOTCONNECT';
  idleState = 'NOT_STARTED';
  timedOut = false;
  lastPing?: Date = null;
  progressBarPopup: NgbModalRef;

  constructor(
    private element: ElementRef, 
    private idle: Idle, 
    private keepalive: Keepalive, 
    private router:Router,
    private ngbModal: NgbModal, 
    private cookieService:CookieService) {

idle.setIdle(1155);     //    sets an idle timeout of 19 minutes 50 seconds.

idle.setTimeout(10);   //     sets a timeout period of 10 seconds.

idle.setInterrupts([    //     sets the interrupts like Keydown, scroll, mouse wheel, mouse down, and etc
  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.logout();
  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) / 10) + 1);
  this.progressBarPopup.componentInstance.progressCount = this.reverseNumber(countdown);
  this.progressBarPopup.componentInstance.countMinutes = (Math.floor(countdown / 60));
  this.progressBarPopup.componentInstance.countSeconds = countdown%60;
});

keepalive.interval(10);     // sets the ping interval to 15 seconds

/**
 *  // 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();
} 

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();
      }
    });
    console.log('opening session timeout pop up')
  }

  logout() {
    this.router.navigate([' environment.loginPage'])
    console.log('Logging user out due to inactivity')
    sessionStorage.clear();
    this.cookieService.deleteAll();
    console.log('Deleting all cookies made during the session')
  }

  closeProgressForm() {
    this.progressBarPopup.close();
  }

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

    ngOnDestroy(): void {
      this.resetTimeOut();
  }

  ngOnInit() {

  }

}

Answer 1

只要有人想知道，就可以弄清楚。在我的NgOnInit（）中，添加了此代码。

  this.router.events
  .filter((event) => event instanceof ActivationEnd)
  .subscribe((event) => {
    if (this.router.url.indexOf(environment.loginPage) === -1) {
       //session-timeout logic here
    }

将登录组件从app.component.ts

1 个答案: