Всплывающее предупреждение о превышении времени ожидания сеанса в Angular

Question

Я работаю над приложением, которое имеет время ожидания сеанса после 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 была моей попыткой взломать вместе решение.

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
}

Таким образом, вы можете избежать любого кода пользовательского интерфейса в вашем сервисе и сосредоточиться на логике предупреждений.