Déconnexion MatDialog ne fonctionne pas dans les navigateurs mobiles

Question

Déconnexion MatDialog ne fonctionne pas dans les navigateurs mobiles

voix

10

Je veux alerter l'utilisateur s'il est inactif pendant 20 minutes. Donc, j'ai créé un service

Il fonctionne bien sur le bureau mais sur le téléphone portable, il n'apparaît pas et parfois si l'écran reste en arrière-plan pendant quelques heures, la boîte de dialogue de déconnexion démarre le compte à rebours une fois que je suis à nouveau sur la page

Je veux dire qu'il devrait se déconnecter et que je devrais voir la page de connexion, mais ici, elle montre la page du compte à rebours d'alerte de déconnexion après quelques heures, sinon elle n'apparaît pas dans le navigateur mobile.

Voici mon code, merci de me faire savoir quelle logique je manque.

Voici le fichier Service.ts. check() sera appelé toutes les 5 sec et l'alerte de déconnexion s'affichera dans 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
    );
  }
}

angular angular-material logout mat-dialog

Créé 15/05/2020 à 13:34
source utilisateur Kartheek s

Dans d'autres langues...

2 réponses

Aakash Garg · Answer 1 · 2020-05-23 09:56

voix

0

Je crois au mobile, lorsque l'utilisateur minimise son navigateur, votre logique s'arrête de s'exécuter car les téléphones mobiles tuent automatiquement l'application en arrière-plan pour la gestion de la mémoire vive et lorsqu'il relance le navigateur, votre script recommence. Vous devez également vous déconnecter lors de l'événement "destroy" ou "window.beforeunload".

Créé 23/05/2020 à 09:56
source utilisateur Aakash Garg

Kartheek s · Answer 2 · 2020-05-26 15:58

Merci pour les suggestions, mais la solution ci-dessous a fonctionné pour moi

Utilisé ngZone lorsqu'il fonctionne en arrière-plan

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();
      }
    });
  }