我有一个运行良好的 Angular 项目,我正在实现 NG-IDLE 和 KeepAlive,以保持 session 新鲜并在 API session 到期之前注销用户。
我的问题是 ng-idle 也在登录页面上运行,这显然不是必需的,因为当它超时时,它会将人带到登录页面。
所以我在我的 app.component.ts 中启动并运行了 ng-idle 和 KeepAlive,但由于我使用的是延迟加载,所以我还有一个 authentication.module.ts 和一个 login.component.ts。
我的根 app.component.ts 中的代码如下:
import { Component } from '@angular/core';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Keepalive } from '@ng-idle/keepalive';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
idleState = 'Not started.';
timedOut = false;
lastPing?: Date = null;
constructor(private idle: Idle, private keepalive: Keepalive) {
// sets an idle timeout of 5 seconds, for testing purposes.
idle.setIdle(5);
// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
idle.setTimeout(5);
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
idle.onTimeout.subscribe(() => {
this.idleState = 'Timed out!';
this.timedOut = true;
});
idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');
// Sets the ping interval to 15 seconds
keepalive.interval(15);
keepalive.onPing.subscribe(() => this.lastPing = new Date());
this.reset();
}
reset() {
this.idle.watch();
this.idleState = 'Started.';
this.timedOut = false;
}
}
我知道我需要调用 idle.unwatch 以防止空闲运行和 idle.watch 在需要时调用,但是我如何从登录或身份验证模块调用它们,或者我可以从根 app.component 检测。 ts?
毫无疑问,你可以说我是 Angular 的新手,所以如果这是一个菜鸟问题,我深表歉意。
最佳答案
由于总是有不止一种方法可以给猫剥皮,这是我自己解决这个问题的方法。我希望其他人将来会发现它有用。
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
import { Idle, DEFAULT_INTERRUPTSOURCES } from '@ng-idle/core';
import { Keepalive } from '@ng-idle/keepalive';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
currentPath: String;
idleState = 'Not started.';
timedOut = false;
lastPing?: Date = null;
constructor(private idle: Idle, private keepalive: Keepalive, location: Location, router: Router) {
// sets an idle timeout of 5 seconds, for testing purposes.
idle.setIdle(5);
// sets a timeout period of 5 seconds. after 10 seconds of inactivity, the user will be considered timed out.
idle.setTimeout(5);
// sets the default interrupts, in this case, things like clicks, scrolls, touches to the document
idle.setInterrupts(DEFAULT_INTERRUPTSOURCES);
idle.onIdleEnd.subscribe(() => this.idleState = 'No longer idle.');
idle.onTimeout.subscribe(() => {
this.idleState = 'Timed out!';
this.timedOut = true;
});
idle.onIdleStart.subscribe(() => this.idleState = 'You\'ve gone idle!');
idle.onTimeoutWarning.subscribe((countdown) => this.idleState = 'You will time out in ' + countdown + ' seconds!');
// Sets the ping interval to 15 seconds
keepalive.interval(15);
keepalive.onPing.subscribe(() => this.lastPing = new Date());
// Lets check the path everytime the route changes, stop or start the idle check as appropriate.
router.events.subscribe((val) => {
this.currentPath = location.path();
if(this.currentPath.search(/authentication\/login/gi) == -1)
idle.watch();
else
idle.stop();
});
}
reset() {
this.idle.watch();
this.idleState = 'Started.';
this.timedOut = false;
}
}
关于Angular 6 ng-空闲,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53988543/