Angular 6中user-idle-service误踢活跃用户问题排查求助

先针对你遇到的「活跃用户被提前踢出」问题，结合你的代码和配置，这里有几个明显的潜在问题需要排查：

1. 重复订阅引发的多重触发风险 #

你的startUserIdle()方法每次登录都会被调用，但调用前没有清理旧订阅或停止之前的userIdle监控。比如用户刷新页面后重新登录，之前的onTimeout()、ping$等订阅仍会存在，这会导致：

• 同一用户行为触发多次refreshToken()请求
• 旧的超时订阅可能在用户活跃时意外触发，直接执行logout()

修复建议：
在启动新监控前先清理旧状态：

startUserIdle() {
  // 先停止旧监控并清空订阅
  this.userIdle.stopWatching();
  this.subscriptions.forEach(sub => sub.unsubscribe());
  this.subscriptions = [];

  // 再启动新的监控流程
  this.userIdle.startWatching();
  this.subscriptions.push(this.userIdle.onTimerStart().subscribe());
  this.subscriptions.push(this.userIdle.onTimeout().subscribe(() => { this.logout(); }));
  this.subscriptions.push(this.userIdle.ping$.subscribe(() => { this.refreshToken(); }));
}

2. 自定义活跃事件的覆盖不全 #

你通过merge()组合了多个事件检测用户活跃，但存在场景遗漏：

• 桌面端用户仅点击按钮（无鼠标移动、按键）时，当前事件列表没有click事件，userIdle可能误判为用户闲置
• 部分组件可能阻止了keydown或click事件的冒泡，导致userIdle无法捕获到用户操作

优化建议：
添加click事件，并确保事件未被阻止冒泡：

this.userIdle.setCustomActivityEvents(merge( 
  fromEvent(window, 'mousemove'),
  fromEvent(window, 'resize'),
  fromEvent(document, 'keydown'),
  fromEvent(document, 'click'), // 新增桌面端点击事件
  fromEvent(document, 'touchstart'),
  fromEvent(document, 'touchend'),
  fromEvent(window, 'scroll') 
));

3. Ping与Idle时间间隔的缓冲不足 #

你的配置是idle:900（15分钟）、ping:840（14分钟），意味着用户闲置14分钟时触发刷新token，再过1分钟就会超时退出。这里的风险是：

• 如果refreshToken()请求因网络波动失败，会直接调用logout()，但用户可能仍处于活跃状态
• 若刷新token的耗时超过1分钟，哪怕用户活跃，旧的超时计时器也会走到尽头触发退出

优化建议：

• 调整ping时间为idle时间的70%-80%，比如设为720秒（12分钟），给刷新操作留足缓冲
• 给refreshToken()添加重试逻辑，避免单次网络问题直接踢用户：

refreshToken() { 
  return this.http.get<any>(this.refreshUrl, { headers: new HttpHeaders({'Content-Type': 'application/json'}) })
    .pipe(retry(2)) // 失败重试2次
    .subscribe(() => { 
      // 更新token相关操作
    }, () => { this.logout(); }); 
}

4. Logout方法的清理顺序问题 #

你的logout()先跳转登录页再清理状态，可能导致跳转后仍有订阅在运行。建议调整顺序：

logout() { 
  // 先清理所有状态
  this.removeUserDetails(); 
  this.removeSessionToken(); 
  this.userIdle.resetTimer(); 
  this.userIdle.stopTimer(); 
  this.userIdle.stopWatching(); 
  this.subscriptions.forEach(subscription => subscription.unsubscribe()); 
  this.setIsLoggedIn(false); 
  // 再跳转登录页
  this.goToLogin(); 
}

额外排查点 #

• 检查是否有其他组件意外修改了userIdle状态（比如误调用resetTimer()或stopWatching()）
• 可以给自定义事件添加日志验证，确认用户操作时事件是否被正确捕获：

this.userIdle.setCustomActivityEvents(merge( 
  // 你的事件列表
).pipe(tap(event => console.log('用户活跃事件触发:', event.type))));

如果操作时控制台无输出，说明事件被阻止冒泡，需要排查对应组件的事件处理逻辑

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