Cerrar sesión MatDialog no funciona en los navegadores móviles

votos
10

Quiero alertar al usuario si está inactivo durante 20 minutos. Así que he creado un servicio

Funciona bien con el escritorio pero en el teléfono móvil no aparece y a veces si la pantalla se deja en segundo plano durante un par de horas, entonces el diálogo de cierre de sesión inicia la cuenta atrás una vez que llego a la página de nuevo

Quiero decir que debería cerrar la sesión y debería ver la página de inicio de sesión pero aquí muestra la página de cuenta atrás de la alerta de cierre de sesión después de un par de horas, si no, no aparece en el navegador móvil.

Aquí está mi código, por favor, hazme saber qué lógica me falta.

Aquí está el archivo Service.ts. check() será llamado cada 5 segundos y la alerta de cierre de sesión se mostrará en 20 segundos...

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
    );
  }
}
Publicado el 15/05/2020 a las 13:34
fuente por usuario
En otros idiomas...                            


2 respuestas

votos
0

Creo en el móvil, cuando el usuario minimiza el navegador su lógica deja de ejecutarse ya que los teléfonos móviles matan automáticamente la aplicación en segundo plano para la gestión de la ram y cuando relanza el navegador su script se inicia de nuevo. También deberías cerrar la sesión en destroy o en window.beforeunload event.

Respondida el 23/05/2020 a las 09:56
fuente por usuario

votos
0

Gracias por las sugerencias, pero la siguiente solución funcionó para mí

Usado ngZone donde se ejecuta en el fondo

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();
      }
    });
  }
Respondida el 26/05/2020 a las 15:58
fuente por usuario

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