Deconectare MatDialog nu funcționează în browserele mobile

voturi
2

Vreau să avertizez utilizatorul dacă este inactiv timp de 20 min. Deci, a creat un serviciu.

Funcționează bine cu desktopul, dar în telefonul mobil nu se afișează și uneori dacă ecranul a rămas în fundal pentru câteva ore, atunci ecranul de dialog deconectare a început numărătoarea inversă odată ce am ajuns din nou pe pagină.

Vreau să spun că ar trebui să se deconecteze și ar trebui să văd pagina de conectare, dar aici arată pagina de contorizare a alertelor de deconectare după câteva ore, altfel nu apare în browserul mobil.

Iată codul meu, vă rugăm să anunțați ce logică îmi lipsește.

Iată fișierul Service.ts. check () va fi apelat la fiecare 5 sec și se va afișa alerta de deconectare în 20 de secunde ...

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
    );
  }
}
Întrebat 15/05/2020 la 13:34
sursa de către utilizator
În alte limbi...                            


2 răspunsuri

voturi
0

Cred în mobil, atunci când utilizatorul minimizează browserul logica dvs. nu mai este executată, deoarece telefoanele mobile ucid automat aplicația de fundal pentru gestionarea ramului și când relansează browserul scriptul dvs. începe din nou. Ar trebui, de asemenea, să vă deconectați la evenimentul de distrugere sau la windows.beforeunload.

Publicat 23/05/2020 la 09:56
sursa de către utilizator

voturi
0

Mulțumesc pentru sugestii, dar soluția de mai jos a funcționat pentru mine

Folosit ngZone unde se rulează în fundal

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();
      }
    });
  }
Publicat 26/05/2020 la 15:58
sursa de către utilizator

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