Angular中使用bn-ng-idle实现闲置超时前30秒提示的方法

你的问题核心在于单独使用了一次性的timer，它只会触发一次，且未在用户活动时重置提示逻辑。以下是基于bn-ng-idle的正确实现，支持用户操作后重新触发闲置检测：

实现思路 #

1. 用变量存储提示计时器的订阅，方便用户活动时取消计时
2. 监听bn-ng-idle的闲置状态变化，用户进入闲置状态时启动30秒提示倒计时
3. 用户产生活动时，立即取消提示计时器并重置闲置检测
4. 提示框弹出后，用户操作则重置会话，否则超时后自动登出

完整代码 #

import { Subscription, timer } from 'rxjs';

// 组件内定义变量，用于存储提示计时器的订阅
private alertTimerSub?: Subscription;

idleSessionTimeout() {
  const idleTimeout = configuration.idleSessionTimoutThreshold;
  const alertAdvanceTime = 30; // 提前提示的秒数

  // 监听闲置超时事件，触发登出逻辑
  this.bnIdle.startWatching(idleTimeout).subscribe(() => {
    this.performLogout();
  });

  // 监听用户闲置状态变化
  this.bnIdle.onIdleStateChanged.subscribe((isIdle: boolean) => {
    if (isIdle) {
      // 用户进入闲置状态，启动提示倒计时
      this.alertTimerSub = timer((idleTimeout - alertAdvanceTime) * 1000).subscribe(() => {
        this.showExpiryAlert();
      });
    } else {
      // 用户产生活动，取消提示计时器
      this.alertTimerSub?.unsubscribe();
    }
  });
}

private showExpiryAlert() {
  // 可替换为Angular Material Dialog等UI组件的对话框
  const userConfirmed = confirm('你的会话将在30秒后过期，请操作以保持会话活跃。');
  
  if (userConfirmed) {
    // 用户确认操作，重置闲置计时器
    this.bnIdle.resetTimer();
    this.alertTimerSub?.unsubscribe();
  } else {
    // 用户未操作，30秒后执行登出
    timer(30000).subscribe(() => {
      this.performLogout();
    });
  }
}

private performLogout() {
  this.bnIdle.stopTimer();
  localStorage.setItem('appStorage', JSON.stringify({}));
  this.route.navigateByUrl('/login');
}

关键细节说明 #

• bnIdle.onIdleStateChanged会在用户进入/离开闲置状态时触发，确保每次闲置都会重新启动提示逻辑
• alertTimerSub用于管理提示计时器的生命周期，避免用户活动后仍弹出过期提示
• 用户确认操作后调用resetTimer()，重置闲置检测流程，保证后续正常监听用户状态

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