Angular Guard页面切换时Loading为false仍未取消订阅问题

问题根源 #

1. AuthGuard是单例服务：Angular的路由守卫默认是单例，页面切换时不会被销毁，若订阅未正确清理，会一直留存并在后续触发。
2. 取消逻辑触发时机滞后：原代码仅在loading: false时取消订阅，但如果用户在HTTP请求完成前就切换页面，这个逻辑根本不会执行，订阅会残留。
3. 导航未等待请求完成：canActivate直接返回true，Angular不会等待token验证请求完成就允许页面跳转，导致请求在后台继续执行，后续订阅回调仍会触发。

解决方案 #

方案1：利用RxJS操作符自动管理订阅（推荐）

重构canActivate使其返回Observable，让Angular等待请求完成后再导航，同时用RxJS操作符自动清理订阅：

import { take, tap, map, catchError, of } from 'rxjs';
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate {
  constructor(
    private router: Router,
    private loginService: LoginService,
    protected globalMessage: GlobalMessageService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log(state.url);

    if (state.url.includes('/login/validation-compte') && next.queryParams['token']) {
      return this.validateToken(next.queryParams['token']).pipe(
        take(1), // 自动取第一个值后取消订阅，避免内存泄漏
        map(() => true), // 根据业务需求，可调整为验证失败时返回UrlTree跳转
        catchError(() => {
          this.globalMessage.add(
            { key: 'loginForm.activation.requestError' },
            GlobalMessageType.MSG_TYPE_ERROR
          );
          return of(true);
        })
      );
    }

    return of(true);
  }

  private validateToken(token: string): Observable<any> {
    return this.loginService.validateRegistration(token).pipe(
      tap((validateObject: any) => {
        if (validateObject.loading === false) {
          if (validateObject.error?.error?.errors[0]?.type === "TokenInvalidatedError") {
            this.globalMessage.add(
              { key: 'loginForm.activation.TokenInvalidatedError' },
              GlobalMessageType.MSG_TYPE_ERROR
            );
          } else if (validateObject.error === false) {
            this.globalMessage.add(
              { key: 'loginForm.activation.OK' },
              GlobalMessageType.MSG_TYPE_CONFIRMATION
            );
          }
        }
      })
    );
  }
}

方案2：通过OnDestroy手动清理订阅

如果需要在Guard销毁时强制取消所有订阅（比如应用卸载或路由配置变更场景），可实现OnDestroy接口：

import { Subject, takeUntil, of } from 'rxjs';
import { Injectable, OnDestroy } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthGuard implements CanActivate, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(
    private router: Router,
    private loginService: LoginService,
    protected globalMessage: GlobalMessageService
  ) {}

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | boolean {
    console.log(state.url);

    if (state.url.includes('/login/validation-compte') && next.queryParams['token']) {
      return this.validateToken(next.queryParams['token']).pipe(
        takeUntil(this.destroy$), // 监听销毁信号，自动取消订阅
        map(() => true)
      );
    }

    return of(true);
  }

  private validateToken(token: string): Observable<any> {
    return this.loginService.validateRegistration(token).pipe(
      tap((validateObject: any) => {
        if (validateObject.loading === false) {
          // 消息处理逻辑同方案1
        }
      })
    );
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

关键改进点 #

• 让canActivate返回Observable，确保Angular等待请求完成后再执行导航，避免页面提前切换导致订阅残留。
• 用take(1)或takeUntil替代手动unsubscribe，利用RxJS的生命周期管理自动清理订阅，减少内存泄漏风险。
• 移除了全局Subscription变量，避免单例Guard中旧订阅被覆盖导致无法取消的问题。

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