Angular Auth Guard失效：基于周期性Observable控制权限异常

你的问题出在Angular路由守卫的工作机制上：canActivate守卫默认只会在首次进入目标路由时订阅一次你的auth$ Observable，用来判断是否允许访问。一旦路由激活成功，后续auth$发出的新值（比如从true变为false）并不会触发守卫的重新评估——因为Angular认为路由已经处于合法状态了，不会主动再去检查权限变化。

要实现权限变化时立即限制路由访问，你需要让守卫持续监听auth$的流，并且在权限失效时主动触发页面跳转。以下是完整的实现代码：

import { Injectable, OnDestroy } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, Subscription, interval } from 'rxjs';
import { map, tap, take, skip } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate, OnDestroy {
  private authSubscription?: Subscription;
  // 模拟周期性变化的权限流
  auth$ = interval(5000).pipe(map((n) => n % 2 === 0));

  constructor(private router: Router) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    // 1. 先获取初始权限状态，用于首次路由校验
    return this.auth$.pipe(
      take(1),
      tap(isAllowed => {
        // 2. 订阅后续的权限变化，实时监控
        this.authSubscription = this.auth$.pipe(
          skip(1) // 跳过已经用于初始校验的第一个值
        ).subscribe(latestIsAllowed => {
          if (!latestIsAllowed) {
            // 权限失效时，强制跳转到无权限页面（或登录页）
            this.router.navigate(['/unauthorized']);
          }
        });
      })
    );
  }

  // 3. 销毁守卫时取消订阅，避免内存泄漏
  ngOnDestroy() {
    this.authSubscription?.unsubscribe();
  }
}

• 初始校验：用take(1)获取auth$的第一个值，作为canActivate的返回结果，决定是否允许进入路由。
• 实时监控：通过tap操作符在初始校验后，订阅auth$的后续变化（skip(1)跳过已处理的初始值），一旦权限变为false，立即调用router.navigate强制跳转。
• 内存泄漏防护：实现OnDestroy接口，在守卫销毁时取消订阅，避免不必要的资源占用。

如果你的权限判断是基于真实的认证逻辑（比如JWT令牌过期），不建议用interval轮询，更高效的方式是：

• 监听令牌的存储变化（比如localStorage的storage事件）
• 计算令牌的过期时间，用定时器在过期前触发权限检查

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