Logout MatDialog funktioniert nicht in mobilen Browsern

stimmen
2

Ich möchte den Benutzer alarmieren, wenn er 20 Minuten lang im Leerlauf ist. Also, einen Dienst erstellt

Es funktioniert gut mit dem Desktop, aber im Mobiltelefon wird es nicht angezeigt, und manchmal, wenn der Bildschirm für ein paar Stunden im Hintergrund blieb, dann startete der Logout-Dialogbildschirm den Countdown, sobald ich wieder auf der Seite war

Ich meine, er sollte sich ausloggen und ich sollte die Login-Seite sehen, aber hier zeigt er die Logout-Alarm-Countdown-Seite nach ein paar Stunden an, sonst erscheint er nicht im mobilen Browser.

Hier ist mein Code, bitte lassen Sie mich wissen, welche Logik mir fehlt.

Hier ist die Datei Service.ts. check() wird alle 5 Sekunden aufgerufen und der Logout-Alarm wird in 20 Sekunden angezeigt...

const MINUTES_UNITL_AUTO_LOGOUT = 0.2; // 1 mins- 20
const CHECK_INTERVAL = 5000; // checks every 5 secs- 5000

@Injectable({
  providedIn: root,
})
export class AutoLogoutService {
  logOutInterval: any;

  constructor(
    private localStorage: LocalStoreManager,
    private authService: AuthService,
    public dialog: MatDialog
  ) {
    this.localStorage.savePermanentData(
      Date.now().toString().toString(),
      DBkeys.AUTO_LOGOUT
    );
    this.initListener();
  }

  initListener() {
    document.body.addEventListener(click, () => this.reset());
    document.body.addEventListener(mouseover, () => this.reset());
    document.body.addEventListener(mouseout, () => this.reset());
    document.body.addEventListener(keydown, () => this.reset());
    document.body.addEventListener(keyup, () => this.reset());
    document.body.addEventListener(keypress, () => this.reset());
  }

  reset() {
    this.setLastAction(Date.now());
  }

  initInterval() {
    this.logOutInterval = setInterval(() => {
      this.check();
    }, CHECK_INTERVAL);
  }
  clearInterval() {
    clearInterval(this.logOutInterval);
  }

  check() {
    const now = Date.now();
    const timeleft = this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;
    console.log(diff);
    if (isTimeout && !this.authService.isLogoutDialogOpenned) {
      this.authService.isLogoutDialogOpenned = true;
      this.dialog
        .open(LogoutDialog, {
          maxWidth: 100vw,
        })
        .afterClosed()
        .subscribe((result) => {
          this.authService.isLogoutDialogOpenned = false;
        });
    }
  }

  public getLastAction() {
    return parseInt(this.localStorage.getData(DBkeys.AUTO_LOGOUT));
  }

  public setLastAction(lastAction: number) {
    this.localStorage.savePermanentData(
      lastAction.toString(),
      DBkeys.AUTO_LOGOUT
    );
  }
}
Veröffentlicht am 15/05/2020 um 13:34
quelle vom benutzer
In anderen Sprachen...                            


2 antworten

stimmen
0

Ich glaube an mobile Geräte: Wenn der Browser des Benutzers minimiert wird, hört Ihre Logik auf, ausgeführt zu werden, wenn Mobiltelefone die Hintergrundanwendung für das Ram-Management automatisch beenden, und wenn er den Browser neu startet, startet Ihr Skript erneut. Sie sollten sich auch beim destroy-Ereignis oder beim window.beforeunload-Ereignis abmelden.

Beantwortet am 23/05/2020 um 09:56
quelle vom benutzer

stimmen
0

Vielen Dank für die Vorschläge, aber die folgende Lösung hat für mich funktioniert

Verwendete ngZone, wo sie im Hintergrund läuft

initInterval() {
    this.ngZone.runOutsideAngular(() => {
      this.logOutInterval = setInterval(() => {
        this.check();
      }, CHECK_INTERVAL);
    })
  }
  clearInterval() {
    clearInterval(this.logOutInterval);
  }

  check() {
    const now = Date.now();
    const timeleft =
      this.getLastAction() + MINUTES_UNITL_AUTO_LOGOUT * 60 * 1000;
    const diff = timeleft - now;
    const isTimeout = diff < 0;
    const isBackgroundLogoutEnabled = diff < -ONE_MINUTE;

    this.ngZone.run(() => {
      if (isTimeout && !this.authService.isLogoutDialogOpenned) {
        this.authService.isLogoutDialogOpenned = true;
        this.dialog
          .open(LogoutDialog, {
            maxWidth: "100vw",
          })
          .afterClosed()
          .subscribe((result) => {
            this.authService.isLogoutDialogOpenned = false;
          });
      }
      if(isBackgroundLogoutEnabled){
        this.clearInterval();
        this.authService.isLogoutDialogOpenned = false;
        this.authService.logout();
        this.authService.redirectLogoutUser();
        this.dialog.closeAll();
      }
    });
  }
Beantwortet am 26/05/2020 um 15:58
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more