Angular 5中如何检测Cookie过期？生命周期钩子可行吗？

嘿，我来帮你理清楚这个问题～首先得明确一点：Angular的生命周期钩子（比如你试过的OnChanges、AfterContentInit）根本没法用来检测Cookie的变化。原因很简单，这些钩子是针对Angular组件/指令的输入属性变更、组件自身生命周期阶段设计的，而Cookie是浏览器层面的存储，完全不在Angular的变更检测机制覆盖范围内，所以你之前尝试的方法没用是正常的。

下面给你几个可行的实现方案，都是在Angular 5里能稳定工作的：

方案1：定时轮询检测（最直接可靠） #

这个方法的思路是每隔一段时间主动检查目标Cookie是否存在（因为浏览器会自动删除过期的Cookie），如果不存在就执行你需要的逻辑。记得在组件销毁时清除定时器，避免内存泄漏。

示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  private cookieCheckTimer: any;

  ngOnInit(): void {
    // 每隔10秒检查一次，可根据业务需求调整间隔
    this.cookieCheckTimer = setInterval(() => {
      this.checkIfCookieExpired();
    }, 10000);
  }

  private checkIfCookieExpired(): void {
    // 替换成你的Cookie名称
    const targetCookie = document.cookie.split('; ')
      .find(row => row.startsWith('your_target_cookie='));
    
    if (!targetCookie) {
      // Cookie不存在，说明已过期，执行你的业务逻辑
      this.handleCookieExpiration();
    }
  }

  private handleCookieExpiration(): void {
    // 这里写Cookie过期后要做的事：比如跳转登录页、清空用户缓存等
    console.log('Cookie已过期，执行指定操作');
  }

  ngOnDestroy(): void {
    // 组件销毁时务必清除定时器
    if (this.cookieCheckTimer) {
      clearInterval(this.cookieCheckTimer);
    }
  }
}

方案2：根据Cookie过期时间精准触发 #

如果你在设置Cookie的时候就知道它的过期时长，可以直接设置一个setTimeout，在Cookie到期的瞬间执行逻辑，比轮询更高效精准。

示例代码：

// 假设你有一个设置Cookie的方法
setUserCookie(value: string, expiresInMinutes: number): void {
  const expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + (expiresInMinutes * 60 * 1000));
  const expiresStr = `expires=${expireDate.toUTCString()}`;
  
  // 设置Cookie
  document.cookie = `user_info=${value}; ${expiresStr}; path=/`;

  // 设置定时器，在Cookie过期时执行操作
  setTimeout(() => {
    this.handleCookieExpiration();
  }, expiresInMinutes * 60 * 1000);
}

private handleCookieExpiration(): void {
  // 执行过期后的逻辑
  console.log('Cookie已到期，触发操作');
}

方案3：监听Cookie的修改（进阶hack） #

浏览器原生没有提供Cookie变化的监听事件，但可以通过重写document.cookie的setter来实现监听，当Cookie被修改（包括过期删除）时触发检查。不过这个方法要谨慎使用，可能会和其他修改Cookie的代码产生冲突。

你可以封装成一个服务来复用：

import { Injectable, Subject } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class CookieMonitorService {
  // 用Subject广播Cookie过期事件
  public cookieExpired$ = new Subject<void>();
  private originalCookieSetter: any;

  constructor() {
    this.startMonitoring();
  }

  private startMonitoring(): void {
    const self = this;
    // 保存原生的cookie setter
    this.originalCookieSetter = Object.getOwnPropertyDescriptor(document, 'cookie').set;

    // 重写setter
    Object.defineProperty(document, 'cookie', {
      set: function(value: string) {
        // 先执行原生逻辑
        self.originalCookieSetter.call(document, value);
        // 检查目标Cookie状态
        self.checkTargetCookie();
      }
    });
  }

  private checkTargetCookie(): void {
    const targetCookie = document.cookie.split('; ')
      .find(row => row.startsWith('your_target_cookie='));
    
    if (!targetCookie) {
      // 广播过期事件
      this.cookieExpired$.next();
    }
  }
}

然后在组件里订阅这个事件：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { CookieMonitorService } from './cookie-monitor.service';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit, OnDestroy {
  private cookieSub: Subscription;

  constructor(private cookieMonitor: CookieMonitorService) {}

  ngOnInit(): void {
    this.cookieSub = this.cookieMonitor.cookieExpired$.subscribe(() => {
      this.handleCookieExpiration();
    });
  }

  private handleCookieExpiration(): void {
    // 执行过期逻辑
    console.log('Cookie已过期');
  }

  ngOnDestroy(): void {
    // 取消订阅防止内存泄漏
    if (this.cookieSub) {
      this.cookieSub.unsubscribe();
    }
  }
}

总结一下：优先选择方案1或方案2，这两个方法简单、稳定，适合大多数场景；方案3适合需要实时监听Cookie变化的复杂场景，但要注意潜在的兼容性问题。

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