Angular中会话超时警告弹窗实现问题求助

这问题我之前在项目里也碰到过，循环引用的根源很明确：你的ContextService是AppModule级别的提供者，而NgbModal内部依赖的某些服务（比如和DOM、组件渲染相关的）可能间接依赖了你的ContextService，直接在构造函数里注入就形成了闭环。另外还有个小问题要先提一下：你之前的警告超时时间计算错了——应该是总会话超时时间减去2分钟，而不是直接设2分钟后触发，不然会在用户登录2分钟就弹提示，而不是30分钟超时前2分钟弹。

下面给你几个可行的解决方案，按改动量从小到大排序：

方案1：用Injector延迟获取NgbModal（改动最小） #

你已经在构造函数里注入了Injector，那可以不用直接注入NgbModal，而是在需要弹窗的时候再通过Injector动态获取，这样就避开了构造时的循环引用：

// 构造函数里移除NgbModal的直接注入
constructor(
  private _http: HttpClient,
  private _injector: Injector
) { }

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) {
      // 动态获取NgbModal服务
      const modalSvc = this._injector.get(NgbModal);
      const timeOutWarningModal = modalSvc.open(SessionExpirationWarning);
      
      timeOutWarningModal.result.then((modalResponse) => {
        if (modalResponse === true) {
          this.keepAlive(null);
          // 重置警告状态，下次超时前还能触发
          this.warningIsActive = false;
        } else {
          // 用户选择登出，直接触发会话过期
          this.sessionExpired();
        }
      }).catch(() => {
        // 用户点击模态框外部关闭，也视为放弃会话
        this.sessionExpired();
      });
      
      this.warningIsActive = true; // 标记已触发，避免重复弹窗
    }
  }, (sessionTimeoutMinutes - sessionWarningMinutes) * 60 * 1000);
}

方案2：拆分弹窗逻辑到独立服务（更清晰的职责分离） #

创建一个专门负责会话警告弹窗的服务，让ContextService只处理会话超时的核心逻辑，通过事件触发弹窗，彻底解耦两者的依赖：

第一步：创建SessionWarningService #

import { Injectable } from '@angular/core';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Subject } from 'rxjs';
import { SessionExpirationWarning } from '../components/session-expiration-warning/session-expiration-warning.component';

@Injectable({ providedIn: 'root' })
export class SessionWarningService {
  // 触发保持活跃的事件，供ContextService订阅
  private keepAliveRequested = new Subject<void>();
  keepAliveRequested$ = this.keepAliveRequested.asObservable();

  constructor(private modalSvc: NgbModal) { }

  triggerWarning() {
    const timeOutWarningModal = this.modalSvc.open(SessionExpirationWarning);
    
    timeOutWarningModal.result.then((modalResponse) => {
      if (modalResponse === true) {
        this.keepAliveRequested.next();
      } else {
        // 用户选择登出，可在这里触发会话过期逻辑，或者让ContextService处理
        // 比如添加一个logoutRequested事件
      }
    }).catch(() => {
      // 关闭模态框视为放弃会话
      // this.logoutRequested.next();
    });
  }
}

第二步：修改ContextService #

constructor(
  private _http: HttpClient,
  private sessionWarningSvc: SessionWarningService
) {
  // 订阅保持活跃的请求
  this.sessionWarningSvc.keepAliveRequested$.subscribe(() => {
    this.keepAlive(null);
    this.warningIsActive = false;
  });
}

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) {
      this.sessionWarningSvc.triggerWarning();
      this.warningIsActive = true;
    }
  }, (sessionTimeoutMinutes - sessionWarningMinutes) * 60 * 1000);
}

方案3：在根组件中监听会话状态（最符合Angular组件-服务分离原则） #

让ContextService只暴露会话状态的Observable，由根组件负责监听并触发弹窗——组件可以正常注入NgbModal，完全不会和服务形成循环引用：

第一步：修改ContextService添加状态Observable #

import { Subject } from 'rxjs';

// ...

export class ContextService {
  private sessionAboutToExpire = new Subject<void>();
  sessionAboutToExpire$ = this.sessionAboutToExpire.asObservable();

  // ...

  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) {
        this.sessionAboutToExpire.next();
        this.warningIsActive = true;
      }
    }, (sessionTimeoutMinutes - sessionWarningMinutes) * 60 * 1000);
  }
}

第二步：在根组件中订阅并弹窗 #

import { Component, OnInit } from '@angular/core';
import { ContextService } from './services/context.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { SessionExpirationWarning } from './components/session-expiration-warning/session-expiration-warning.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private contextSvc: ContextService,
    private modalSvc: NgbModal
  ) { }

  ngOnInit() {
    this.contextSvc.sessionAboutToExpire$.subscribe(() => {
      const timeOutWarningModal = this.modalSvc.open(SessionExpirationWarning);
      
      timeOutWarningModal.result.then((modalResponse) => {
        if (modalResponse === true) {
          this.contextSvc.keepAlive(null);
          // 重置警告状态，建议在ContextService中添加公开方法，而非直接修改私有属性
          this.contextSvc.resetWarningStatus();
        } else {
          this.contextSvc.sessionExpired();
        }
      }).catch(() => {
        this.contextSvc.sessionExpired();
      });
    });
  }
}

如果warningIsActive是私有变量，建议在ContextService里添加一个resetWarningStatus()方法，代替直接修改私有属性，更符合封装原则。

内容的提问来源于stack exchange，提问作者Sam