Logout MatDialog non funziona nei browser mobili

voti
10

Voglio avvisare l'utente se rimane inattivo per 20 minuti. Quindi, creato un servizio

Funziona bene con il desktop, ma nel cellulare non compare e a volte se lo schermo rimane sullo sfondo per un paio d'ore, allora la schermata di dialogo di logout avvia il conto alla rovescia una volta che sono arrivato di nuovo sulla pagina

Voglio dire che dovrebbe uscire e dovrei vedere la pagina di login, ma qui mostra la pagina di conto alla rovescia dell'avviso di uscita dopo un paio d'ore, altrimenti non appare nel browser del cellulare.

Qui c'è il mio codice, per favore fatemi sapere quale logica mi manca.

Ecco il file Service.ts. check() sarà chiamato ogni 5 sec. e l'avviso di logout apparirà 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
    );
  }
}
È pubblicato 15/05/2020 alle 13:34
fonte dall'utente
In altre lingue...                            


2 risposte

voti
0

Io credo nel mobile, quando l'utente minimizza il browser la vostra logica smette di eseguire come i telefoni cellulari uccidono automaticamente l'applicazione in background per la gestione della ram e quando rilancia il browser il vostro script si avvia di nuovo. Si dovrebbe anche fare il logout su destroy o sull'evento window.beforeunload.

Risposto il 23/05/2020 a 09:56
fonte dall'utente

voti
0

Grazie per i suggerimenti, ma la soluzione seguente ha funzionato per me

Usato ngZone dove gira in sottofondo

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();
      }
    });
  }
Risposto il 26/05/2020 a 15:58
fonte dall'utente

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