注销 MatDialog 在移动浏览器中不起作用
Logout MatDialog not working in mobile browsers
我想在用户闲置 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
);
}
}
我相信移动设备,当用户最小化浏览器时,您的逻辑将停止执行,因为手机会自动终止后台应用程序以进行 ram 管理,当他重新启动浏览器时,您的脚本将再次启动。您还应该在销毁或 window.beforeunload 事件时注销。
感谢您的建议,但以下解决方案对我有用
在后台运行的地方使用了 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();
}
});
}
我想在用户闲置 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
);
}
}
我相信移动设备,当用户最小化浏览器时,您的逻辑将停止执行,因为手机会自动终止后台应用程序以进行 ram 管理,当他重新启动浏览器时,您的脚本将再次启动。您还应该在销毁或 window.beforeunload 事件时注销。
感谢您的建议,但以下解决方案对我有用
在后台运行的地方使用了 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();
}
});
}