Angular用户闲置服务过早问题
在Angular应用程序中使用用户闲置服务时，可能会遇到这种情况——无论用户是否进行任何交互操作，闲置服务都会在不到预定时间的情况下将用户状态设置为“空闲”。这可能遇到的问题是，用户可能正在与应用程序交互，但应用程序认为用户已经处于闲置状态，从而导致应用程序错误。
要解决这个问题，您可以使用下面的步骤：
-
创建一个名为“app-idle”服务的服务，并将其设置为应用程序的根模块。
-
在 service.ts 文件中添加下面的代码：
@Injectable() export class AppIdleService extends Idle { constructor() { super(); } setIdle(value: boolean) { if (value) { this.timeout(600); // 预设时间为10分钟 } else { this.timeout(false); } super.setIdle(value); } setInterrupts(interrupts: Interrupt[]) { super.setInterrupts(interrupts); interrupts.map((interrupt) => { switch (interrupt) { case Interrupt.DOMCLICK: const source = fromEvent(document, 'click'); this.addIdleStartListener(() => source.subscribe()); break; } }); } }
- 在 app.module.ts 文件中定义应用程序的根模块。
@NgModule({ imports: [ BrowserModule, IdleModule.forRoot(), ], providers: [ { provide: IdleExpiry, useFactory: () => new CustomIdleExpiry() }, { provide: APP_BASE_HREF, useValue: '/app/' }, AppIdleService, ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { }
- 在 app.component.ts 文件的构造函数中添加以下代码：
constructor(private idle: AppIdleService, private router: Router) { router.events.subscribe((val) => { if (val instanceof NavigationEnd) { this.idle.watch(); } }); }
- 在 app.component.ts 文件中添加以下代码：
ngOnInit() { const interrupts: Interrupt[] = [ Interrupt.DOMCLICK ]; this.idle.setIdle(false); this.idle.setInterrupts(interrupts); this.idle.onTimeout.subscribe(() => { localStorage.clear(); // 进行本地存储清理 }); }
- 在组件模板中，添加下面代码：
- 运行应用程序，确保应用程序在久未操作后，用户状态仍处于“活跃”状态。
通过这些步骤，您可以解决用户闲置服务过早的问题，从而确保您的应用程序可以正确检测和设置用户状态。