我有一个运行良好的Angular项目，并且正在实施NG-IDLE和KeepAlive，以保持会话新鲜并在API会话过期之前注销用户。
我的问题是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在需要时调用，但是如何从登录或身份验证模块中调用它们，或者如何从根应用程序进行检测.component.ts？
毫无疑问，您可以说我是Angular的新手，如果这是一个菜鸟问题，我们深表歉意。
答案 0 :(得分：0)
一种方法是拥有除登录外的其他路径。所有监视和监视逻辑都可以从app.component.ts
移到此处在 app.routing.ts
中const routes: Routes = [
{ path: 'login', component: LoginComponent },
{
path: '', component: HomeComponent,
children: [
// add auth requiring routes here
]
}
];
在 home.component.ts
中export class HomeComponent implements OnDestroy {
constructor() {
// start watching here
}
ngOnDestroy() {
// unwatch here
}
}
在 home.component.html
中<router-outlet></router-outlet>
答案 1 :(得分：0)
由于总是有不止一种方法给猫皮，所以这是我自己解决这个问题的方法。我希望其他人将来会发现它有用。
import { Component } from '@angular/core';
import { Location } from '@angular/common';
import { Router } from '@angular/router';
@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;
}
}
答案 2 :(得分：0)
当您将所有路线分开时，user2191410的好答案很容易停止。非常感谢，这对我来说是一个指南。
我有这个：
export class InitComponent implements OnInit {
start watch()
}
ngOnDestroy() {
// unwatch here
this.idle.stop();
}
在我的路线中：
{ path: 'dashboard',
component: InitComponent,
canActivate: [ AuthGuard ],
children: [
{ path: '', component: DashboardComponent }
All my pages are here...
]
}
登录组件来自InitComponent，如下所示：
const routes: Routes = [
{ path: 'login', component: LoginComponent },
{ path: 'lock', component: LockComponent },
{ path: 'recover', component: RecoverComponent }
];
AppComponent具有第一个路由器出口
<router-outlet></router-outlet>
最后我的InitComponents有第二个路由器出口
<router-outlet></router-outlet>
答案 3 :(得分：0)
您可以在启动ng-idle之前检查用户是否先登录
this.currentUser = this.authenticationService.currentUserValue;
if (this.currentUser) {
this.ifIsLogged = true ;
// sets an idle timeout of 5 seconds, for testing purposes.
idle.setIdle(3000000);
// sets a timeout period of 5 seconds. after 20 seconds of inactivity, the user will be considered timed out.
idle.setTimeout(2000000);
// 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.' ;
alert('No longer idle. ') ;
});
idle.onTimeout.subscribe(() => {
this.idleState = 'Timed out!';
this.timedOut = true;
this.logout() ;
});
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();
}