Logout MatDialog não funciona em navegadores móveis

votos
2

Eu quero alertar o usuário se ele estiver ocioso por 20 min. Então, crie um serviço

Ele está funcionando bem com o desktop, mas no celular não aparece e, às vezes, se a tela é deixada em segundo plano por algumas horas, então a tela de diálogo de logout iniciou a contagem regressiva uma vez que eu entrei na página novamente

Quero dizer que deve sair e eu devo ver a página de login, mas aqui ele mostra a página de contagem regressiva de alerta de logout após algumas horas, ele não aparece no navegador móvel.

Aqui está o meu código por favor diga-me qual a lógica que me está a faltar.

Aqui está o arquivo Service.ts. check() será chamado a cada 5 seg. e o alerta de logout será exibido em 20 seg...

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 15/05/2020 em 13:34
fonte usuário
Em outras línguas...                            


2 respostas

votos
0

Eu acredito no celular, quando o usuário minimiza o navegador sua lógica pára de executar como os celulares matam aplicativo de fundo automaticamente para o gerenciamento de ram e quando ele relança o navegador seu script começa novamente. Você também deve fazer logout em destroy ou em window.beforeunload event.

Respondeu 23/05/2020 em 09:56
fonte usuário

votos
0

Obrigado pelas sugestões, mas a solução abaixo funcionou para mim

Usado ngZone onde corre em segundo plano

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();
      }
    });
  }
Respondeu 26/05/2020 em 15:58
fonte usuário

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