ngx-auto-logout - Angular Library

Angular 自动登出组件库 - 支持 Angular 9.x+，零第三方依赖（除RxJS）

✨ 特性

• 🔄 双模式支持：固定时间模式 & 空闲超时模式
• ⏱️ 可配置时长：超时时间、警告时间均可配置
• 🔔 智能提醒：倒计时警告 + 自定义回调
• ⏸️ 暂停/恢复：支持临时暂停自动登出
• ➕ 延长会话：用户可主动延长会话时间
• 💾 持久化：localStorage 持久化，刷新页面保持状态
• 🎯 零依赖：仅依赖 RxJS，无 Toastr 等UI库依赖
• 📦 兼容性强：支持 Angular 9.x - 20.x

📦 安装

npm install ngx-auto-logout

🚀 快速开始

1. 导入模块

// app.module.ts (Angular 9-14)
import { AutoLogoutModule } from 'ngx-auto-logout';

@NgModule({
  imports: [
    AutoLogoutModule.forRoot({
      mode: 'fixed',
      timeout: 300,
      warningTime: 30,
      toastTime: 10,
      onWarning: (seconds) => console.log(`警告: 还剩${seconds}秒`),
      onTimeout: () => this.authService.logout()
    })
  ]
})
export class AppModule {}

// app.config.ts (Angular 15+)
import { provideAutoLogout } from 'ngx-auto-logout';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAutoLogout({
      mode: 'fixed',
      timeout: 300,
      warningTime: 30,
      onWarning: (seconds) => console.log(`警告: 还剩${seconds}秒`),
      onTimeout: () => authService.logout()
    })
  ]
};

2. 在组件中使用

import { Component } from '@angular/core';
import { AutoLogoutService } from 'ngx-auto-logout';

@Component({...})
export class AppComponent {
  constructor(private autoLogout: AutoLogoutService) {
    // 订阅倒计时
    this.autoLogout.getCountdown().subscribe(seconds => {
      console.log('剩余时间:', seconds);
    });
  }
  
  // 延长会话
  extendSession() {
    this.autoLogout.extendSession(1800); // 延长30分钟
  }
  
  // 暂停/恢复
  togglePause() {
    if (this.autoLogout.isPaused()) {
      this.autoLogout.resume();
    } else {
      this.autoLogout.pause();
    }
  }
}

📖 API 文档

AutoLogoutConfig

interface AutoLogoutConfig {
  mode: 'fixed' | 'idle';      // 模式
  timeout: number;              // 超时时间（秒）
  warningTime?: number;         // 警告时间（秒），默认30
  maxExtendTimes?: number;      // 最大延长次数，-1=无限制
  onWarning?: (seconds: number) => void;  // 警告回调
  onTimeout?: () => void;       // 超时回调
}

AutoLogoutService

// 启动监控
startMonitoring(config?: Partial<AutoLogoutConfig>): void

// 停止监控
stopMonitoring(): void

// 延长会话
extendSession(seconds?: number): boolean

// 暂停
pause(): void

// 恢复
resume(): void

// 获取倒计时
getCountdown(): Observable<number>

// 格式化倒计时
formatCountdown(seconds: number): string

// 检查状态
isPaused(): boolean
canExtend(): boolean
getCurrentMode(): 'fixed' | 'idle'

🎯 使用场景

场景1：办公系统（固定时间）

{
  mode: 'fixed',
  timeout: 300,        // 5分钟
  warningTime: 30,
  maxExtendTimes: 3,   // 最多延长3次
  onWarning: (s) => this.showWarning(s),
  onTimeout: () => this.authService.logout()
}

场景2：展示屏（空闲超时）

{
  mode: 'idle',
  timeout: 600,        // 10分钟无操作
  warningTime: 60,
  maxExtendTimes: -1,  // 无限延长
  onWarning: (s) => this.showWarning(s),
  onTimeout: () => this.resetToHome()
}

🔧 高级用法

自定义警告UI

// 不使用内置Toast，完全自定义
{
  onWarning: (seconds) => {
    // 显示自定义警告对话框
    this.dialog.open(WarningDialogComponent, {
      data: { seconds }
    });
  },
  onTimeout: () => {
    // 自定义超时处理
    this.saveUnsavedData();
    this.router.navigate(['/login']);
  }
}

动态调整配置

// 在不同页面使用不同配置
ngOnInit() {
  if (this.route.snapshot.data['longTimeout']) {
    this.autoLogout.startMonitoring({
      timeout: 1800,  // 表单页面30分钟
      warningTime: 120
    });
  }
}

📝 注意事项

1. 无UI依赖：本库不提供UI组件，需自行实现倒计时显示
2. 回调函数：通过 onWarning 和 onTimeout 回调实现自定义行为
3. localStorage：使用 localStorage 存储状态
4. 兼容性：支持 Angular 9.x - 20.x，RxJS 6.5+

🐛 常见问题

Q: 如何显示倒计时？

A: 订阅 getCountdown() Observable，在模板中显示：

countdown$ = this.autoLogout.getCountdown();

<div>{{ countdown$ | async | date:'mm:ss' }}</div>

Q: 如何在登录时重置？

A: 调用 clearLoginTime()：

loginSuccess() {
  this.autoLogout.clearLoginTime();
  this.autoLogout.startMonitoring(config);
}

Q: 支持哪些 Angular 版本？

A: 支持 Angular 9.x - 20.x，RxJS 6.5+

📄 License

MIT

👥 贡献

欢迎提交 Issue 和 Pull Request！

Made with ❤️ by SmarterLab Team