Uitloggen MatDialog werkt niet in mobiele browsers

stemmen
2

Ik wil de gebruiker waarschuwen als hij 20 min. niet actief is. Dus, creëerde een service

Het werkt prima met de desktop, maar in de mobiele telefoon is het niet te zien en soms als het scherm links op de achtergrond voor een paar uur, dan logout dialoogvenster begon het aftellen zodra ik weer op de pagina

Ik bedoel het zou moeten uitloggen en ik zou de inlogpagina moeten zien, maar hier toont het de aftelpagina voor het uitloggen na een paar uur anders wordt het niet weergegeven in de mobiele browser.

Hier is mijn code laat me weten welke logica ik mis.

Hier is Service.ts bestand. check() zal worden opgeroepen voor elke 5 seconden en zal uitloggen waarschuwing zal worden weergegeven in 20 sec...

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
    );
  }
}
De vraag is gesteld op 15/05/2020 om 13:34
bron van user
In andere talen...                            


2 antwoorden

stemmen
0

Ik geloof in mobiel, wanneer de gebruiker geminimaliseerd browser uw logica stopt met het uitvoeren als mobiele telefoons te doden achtergrond applicatie automatisch voor ram beheer en wanneer hij herstart browser uw script opnieuw begint. Je moet ook uitloggen op vernietigen of op window.beforeunload event.

antwoordde op 23/05/2020 om 09:56
bron van user

stemmen
0

Bedankt voor de suggesties, maar de onderstaande oplossing werkte voor mij

Gebruikte ngZone waar het op de achtergrond loopt

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();
      }
    });
  }
antwoordde op 26/05/2020 om 15:58
bron van user

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