我正在处理一个在30分钟不活动后会话超时的应用程序。我有一个新的要求是弹出一条消息,询问用户是否希望他们的会话保持活动状态,在他们自动注销之前几分钟。
现在会话以我认为非常不正统的方式进行管理,我需要尝试使用已经存在的内容。应用模块使用的服务称为context.service
(注入为提供者),它使用setTimeout来确定30分钟的不活动时间是否已过期。
鉴于我需要访问该倒计时,我想创建一个先前执行2分钟的镜像超时并触发模态,询问用户是否要保持会话打开。将NgbModal
注入ContextService
后,我收到一个循环引用错误,这似乎很合理。尝试使用提供程序在DOM上填充模式似乎有点疯狂,但我不确定什么是可行的替代方案。
这是存在的当前状态(带有循环引用错误):
// ...
import { SessionExpirationWarning } from '../components/session-expiration-warning/session-expiration-warning.component';
// ....
constructor(
private _http: HttpClient,
private _injector: Injector,
private modalSvc: NgbModal
) {
// ...
}
// ...
setSessionTimeout() {
if (this.appConfig === null) { return; }
clearTimeout(this._timeoutId);
clearTimeout(this.timeoutWarning);
const sessionTimeOutConfig = this.appConfig.SessionTimeoutMinutes;
const SessionTimeoutMinutes = sessionTimeOutConfig === undefined ? 5 : sessionTimeOutConfig;
const sessionWarningMinutes = 2;
this._timeoutId = setTimeout(() => {
this.sessionExpired();
}, SessionTimeoutMinutes * (60 * 1000));
this.timeoutWarning = setTimeout(() => {
if (!this.warningIsActive) {
const timeOutWarningModal = this.modalSvc.open(SessionExpirationWarning);
timeOutWarningModal.result.then((modalResponse) => {
if (modalResponse === true) {
this.keepAlive(null);
}
});
}
}, sessionWarningMinutes * (60 * 1000));
}
我this.timeoutWarning
试图破解解决方案。
答案 0 :(得分:5)
您可以做的是在显示警告弹出窗口时发出Observable
:
import { timer } from 'rxjs/observable/timer';
// ...
public sessionWarningTimer$ = new Subject();
// ...
setSessionTimeout() {
// ...
timer(sessionWarningMinutes * 60 * 1000).subscribe(this.sessionWarningTimer$);
}
在某个组件中(例如您的AppComponent
),您可以订阅sessionWarningTimer$
:
private destroyed$ = new Subject();
ngOnInit() {
this
.contextService
.sessionWarningTimer$
.takeUntil(this.destroyed$)
.subscribe(() => this.displaySessionWarning());
}
ngOnDestroy() {
this.destroyed$.next();
}
displaySessionWarning() {
// your display code here
}
像这样,您可以避免服务中的任何UI代码,而是专注于警告逻辑。