javascript - Angular 中的 session 超时警告弹出窗口

Question

我正在处理一个在 30 分钟不活动后 session 超时的应用程序。我有一个新要求，即在用户自动注销前几分钟弹出一条消息，询问他们是否希望保持 session 处于事件状态。

现在， session 以我认为非常不正统的方式进行管理，我需要尝试使用已经存在的方式。应用程序模块使用名为 context.service 的服务(作为提供者注入(inject))，它使用 setTimeout 来确定 30 分钟的不活动时间何时到期。

鉴于我需要访问该倒计时，我想创建一个镜像超时，它会提前 2 分钟执行并触发模式，询问用户是否要保持 session 打开。将 NgbModal 注入(inject) 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 是我拼凑出一个解决方案的尝试。

Answer 1

您可以做的是让一个 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 代码，而是专注于警告逻辑。