javascript - @ng-idle/core: Timeout som skjer på en idle-instans får avbruddet til å slutte å fungere på den andre idle-instansen

Jeg bruker "@ng-idle/core": "~11.1.0" og Angular 13-applikasjon.

Jeg har to inaktive instanser, en for automatisk utlogging og en annen for skjermsparer.

Hvis skjermspareren min er «Aktiv» og hvis tidsavbrudd skjer ved første tilfelle (dvs. automatisk utlogging) og jeg prøver å avbryte skjermen, så går ikke skjermspareren av og den blokkerer brukergrensesnittet. (En ting er klart, og det er at avbruddsabonnementet slutter å fungere i dette scenariet).

Hvordan løse dette problemet?

Eksempelkode for referanse:

import {Component, NgZone, OnInit} from '@angular/core';
import {DEFAULT_INTERRUPTSOURCES, Idle, LocalStorage, LocalStorageExpiry} from '@ng-idle/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
  title = 'my-idle-app';
  private readonly screenSaver!: HTMLElement;
  private readonly screenSaverText!: Text;
  idleTime1: number = 1;
  private screenSaverIdle = new Idle(new LocalStorageExpiry(new LocalStorage()), this.ngZone);

  constructor(readonly ngZone: NgZone, private idle1: Idle) {
    this.screenSaver = document.createElement('div');
    this.screenSaver.id = 'screensaver';
    this.screenSaver.className = 'screen-saver';
    this.screenSaverText = document.createTextNode('---%');
    const movingTxt = document.createElement('span');
    movingTxt.appendChild(this.screenSaverText);
    this.screenSaver.appendChild(movingTxt);
    this.removeScreenSaver();

    this.screenSaverIdle.setIdleName('screenSaverIdleService');
    this.screenSaverIdle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
    this.screenSaverIdle.setTimeout(false);
    this.screenSaverIdle.setIdle(10);
    this.screenSaverIdle.watch();

    this.screenSaverIdle.onIdleStart.subscribe(() => {
      document.body.appendChild(this.screenSaver);
    });

    this.screenSaverIdle.onIdleEnd.subscribe(() => {
      console.log('IDLE END ::');
      this.removeScreenSaver();
    });
  }

  ngOnInit() {
    this.idle1.setIdleName('AutoLogoutIdleService');
    this.idle1.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    this.idle1.setIdle(this.idleTime1);
    this.idle1.setTimeout(10);

    this.idle1.onIdleStart.subscribe(() => {
      console.log("IDLE 1 STARTS")
    });

    this.idle1.onIdleEnd.subscribe({
      next: () => {
        console.log("IDLE 1 END");
      },
      complete: () => {
        console.log("idle 1 completed");
      }
    });

    this.idle1.onTimeout.subscribe(()=> {
      console.log("User session timed Out",);
    });

    this.idle1.watch();
  }

  private removeScreenSaver() {
    const ex = document.getElementById('screensaver');
    if (ex) {
      document.body.removeChild(ex);
    }
  }
}

Jeg analyserte kildekoden til ng-idle-biblioteket, og det ser ut til at siden tidsavbruddsverdien er "false" for skjermsparerens ideelle tilfelle, bør det ikke avbryte abonnementet på avbrudd.

Så, mitt spørsmål vil være angående tilfellene av at tjenestene blir opprettet. Forårsaker det noen problemer her?

Svar #1

Det er vanskelig å pause/tilbakestille timeren til ng-idle2 når man ser på kildekoden. Så jeg bare stopper og starter skjermsparertimeren, og dette ser ut til å fungere fint.

this.idle1.onTimeout.subscribe(() => {
  console.log('User session timed Out');
  this.removeScreenSaver();
  this.screenSaverIdle.stop();
  this.screenSaverIdle.watch();
});

Full kode:

import { Component, NgZone, OnInit } from '@angular/core';
import {
  DEFAULT_INTERRUPTSOURCES,
  Idle,
  LocalStorage,
  LocalStorageExpiry,
} from '@ng-idle/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  title = 'my-idle-app';
  private readonly screenSaver!: HTMLElement;
  private readonly screenSaverText!: Text;
  idleTime1: number = 1;
  private screenSaverIdle = new Idle(
    new LocalStorageExpiry(new LocalStorage()),
    this.ngZone
  );

  constructor(readonly ngZone: NgZone, private idle1: Idle) {
    this.screenSaver = document.createElement('div');
    this.screenSaver.id = 'screensaver';
    this.screenSaver.className = 'screen-saver';
    this.screenSaverText = document.createTextNode('---%');
    const movingTxt = document.createElement('span');
    movingTxt.appendChild(this.screenSaverText);
    this.screenSaver.appendChild(movingTxt);
    this.removeScreenSaver();

    this.screenSaverIdle.setIdleName('screenSaverIdleService');
    this.screenSaverIdle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
    this.screenSaverIdle.setTimeout(false);
    this.screenSaverIdle.setIdle(10);
    this.screenSaverIdle.watch();
    this.screenSaverIdle.onIdleStart.subscribe(() => {
      console.log(
        `Screen saver Active:: ${this.screenSaverIdle.getIdle()}::${this.screenSaverIdle.getTimeout()}::${this.screenSaverIdle.isIdling()}::${this.screenSaverIdle.isRunning()}`
      );
      document.body.appendChild(this.screenSaver);
    });

    this.screenSaverIdle.onIdleEnd.subscribe(() => {
      console.log('Screen saver Idle end ::');
      this.removeScreenSaver();
    });
  }

  ngOnInit() {
    this.idle1.setIdleName('AutoLogoutIdleService');
    this.idle1.setInterrupts(DEFAULT_INTERRUPTSOURCES);

    this.idle1.setIdle(this.idleTime1);
    this.idle1.setTimeout(30);

    this.idle1.onIdleStart.subscribe(() => {
      console.log('IDLE 1 STARTS');
    });

    this.idle1.onIdleEnd.subscribe({
      next: () => {
        console.log('IDLE 1 END');
      },
      complete: () => {
        console.log('idle 1 completed');
      },
    });

    this.idle1.onTimeout.subscribe(() => {
      console.log('User session timed Out');
      this.removeScreenSaver();
      this.screenSaverIdle.stop();
      this.screenSaverIdle.watch();
    });

    this.idle1.watch();
  }

  private removeScreenSaver() {
    const ex = document.getElementById('screensaver');
    console.log(ex);
    if (ex) {
      document.body.removeChild(ex);
    }
  }
}

Stackblitz Demo