如何在Angular应用层面创建全局定时器实现自动登出？

我明白你想要的是一个跨页面生效的全局定时器，只有在用户登录后才启动，到时间自动调用登出方法。之前在AuthenticationService里直接创建定时器失效，大概率是因为订阅管理不当，或者服务的实例化问题（比如没设置为单例）。下面给你一套可行的方案：

第一步：改造AuthenticationService，完善状态管理与定时器封装 #

首先确保你的服务是单例（Angular 6+推荐用providedIn: 'root'），然后添加登录状态的可观察对象，同时把定时器逻辑封装成独立方法，方便外部调用和管理订阅：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { JwtHelper } from '@auth0/angular-jwt';
import { Router } from '@angular/router';
import { Observable, BehaviorSubject, timer, Subscription } from 'rxjs';

@Injectable({ providedIn: 'root' }) // 确保服务为单例
export class AuthenticationService {
  private isLoggedInSubject = new BehaviorSubject<boolean>(this.checkInitialLoginStatus());
  isLoggedIn$ = this.isLoggedInSubject.asObservable(); // 对外暴露登录状态的Observable
  private logoutTimerSubscription: Subscription | null = null;

  constructor(
    private http: Http,
    private _JwtHelper: JwtHelper,
    private router: Router
  ) {}

  // 检查初始登录状态（页面刷新时调用）
  private checkInitialLoginStatus(): boolean {
    const token = localStorage.getItem('token');
    return !!token;
  }

  isLoggedIn(): boolean {
    return this.isLoggedInSubject.value;
  }

  login(credentials) {
    return this.http.post('http://something/api/login/login', credentials)
      .map(response => {
        const result = response.json();
        if (result && result.token) {
          localStorage.setItem('token', result.token);
          this.isLoggedInSubject.next(true); // 更新登录状态为已登录
          return true;
        }
        return false;
      });
  }

  // 启动登出定时器
  startLogoutTimer(delayMs: number = 7000): void {
    // 如果已有定时器，先取消避免重复触发
    if (this.logoutTimerSubscription) {
      this.logoutTimerSubscription.unsubscribe();
    }
    // 创建定时器，到时间自动执行登出
    this.logoutTimerSubscription = timer(delayMs).subscribe(() => {
      this.logout();
    });
  }

  // 取消登出定时器（比如用户操作后重置时用，可选）
  cancelLogoutTimer(): void {
    if (this.logoutTimerSubscription) {
      this.logoutTimerSubscription.unsubscribe();
      this.logoutTimerSubscription = null;
    }
  }

  logout(): void {
    localStorage.removeItem('token');
    this.isLoggedInSubject.next(false); // 更新登录状态为未登录
    this.cancelLogoutTimer(); // 登出后清理定时器
    this.router.navigate(['/login']);
  }
}

第二步：在AppComponent中管理全局定时器 #

AppComponent是Angular应用的根组件，只要应用不关闭就不会被销毁，非常适合用来管理全局定时器。我们在这里订阅登录状态的变化，当用户登录成功后自动启动定时器：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { AuthenticationService } from './authentication.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private loginStatusSubscription: Subscription | null = null;

  constructor(private authService: AuthenticationService) {}

  ngOnInit(): void {
    // 订阅登录状态变化，自动触发定时器的启动/取消
    this.loginStatusSubscription = this.authService.isLoggedIn$.subscribe(isLoggedIn => {
      if (isLoggedIn) {
        // 登录成功后启动定时器，这里设为7秒（可根据需求修改，比如30分钟=1800000ms）
        this.authService.startLogoutTimer(7000);
      } else {
        // 未登录或登出时取消定时器
        this.authService.cancelLogoutTimer();
      }
    });
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    if (this.loginStatusSubscription) {
      this.loginStatusSubscription.unsubscribe();
    }
    this.authService.cancelLogoutTimer();
  }
}

为什么这个方案能解决你的问题？ #

• 全局持久运行：AppComponent是根组件，生命周期和应用一致，不会因为页面跳转被销毁，定时器能持续生效。
• 状态驱动逻辑：通过BehaviorSubject传递登录状态，确保登录、登出时都能正确启动/取消定时器。
• 避免内存泄漏：所有订阅都在合适的时机取消，包括组件销毁和登出时。
• 单例服务保障：通过providedIn: 'root'确保AuthenticationService只有一个实例，状态和定时器逻辑全局统一。

如果需要在用户有操作时重置定时器（比如点击页面、输入内容），可以在AppComponent里监听全局事件（比如document:click），然后调用authService.cancelLogoutTimer()再重新startLogoutTimer()即可。

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