注销 MatDialog 在移动浏览器中不起作用

Question

我想在用户闲置 20 分钟时提醒他。所以，创建了一个服务。

它在桌面上工作正常，但在移动设备上 phone 它没有显示，有时如果屏幕在后台停留几个小时，然后当我再次进入页面时注销对话框屏幕开始倒计时.

我的意思是它应该注销，我应该看到登录页面，但这里它在几个小时后显示注销警报倒计时页面，否则它不会显示在移动浏览器中。

这是我的代码，请让我知道我缺少哪个逻辑。

这里是 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
    );
  }
}

Answer 1

我相信移动设备，当用户最小化浏览器时，您的逻辑将停止执行，因为手机会自动终止后台应用程序以进行 ram 管理，当他重新启动浏览器时，您的脚本将再次启动。您还应该在销毁或 window.beforeunload 事件时注销。

Answer 2

感谢您的建议，但以下解决方案对我有用

在后台运行的地方使用了 ngZone

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

注销 MatDialog 在移动浏览器中不起作用

Logout MatDialog not working in mobile browsers

angular

angular-material

logout

mat-dialog