Выход MatDialog не работает в мобильных браузерах

Question

Выход MatDialog не работает в мобильных браузерах

голоса

10

Я хочу предупредить пользователя, если он простаивает 20 минут. Итак, создал сервис

Он прекрасно работает на рабочем столе, но в мобильном телефоне он не отображается, и иногда, если экран остался в фоновом режиме на пару часов, то после того, как я снова попал на страницу, начался обратный отсчет времени выхода из системы

Я имею в виду, что он должен выйти из системы, и я должен увидеть страницу входа, но здесь он показывает страницу обратного отсчета предупреждений о выходе через пару часов, в противном случае он не отображается в мобильном браузере.

Вот мой код, пожалуйста, дайте мне знать, какой логики мне не хватает.

Вот файл Service.ts. check() будет вызываться каждые 5 секунд и через 20 секунд появится предупреждение о выходе из системы....

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

Задан 15/05/2020 в 13:34
источник пользователем Kartheek s

На других языках...

2 ответов

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

Я верю в мобильный, когда пользователь минимизирует браузер, ваша логика перестает исполняться, так как мобильные телефоны автоматически убивают фоновое приложение для управления тараном, и когда он перезапускает браузер, ваш скрипт запускается снова. Вы также должны выйти из системы при уничтожении или в окне.beforeunload.

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

Спасибо за предложения, но нижеприведенное решение сработало на меня

Используется зона, в которой он работает в фоновом режиме

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