Angular 8：如何在认证完成前抑制未授权HTTP请求？

我来帮你搞定这个问题——你遇到的核心矛盾就是菜单请求在AuthGuard完成认证、令牌准备好之前就触发了，之前靠cookie判断的逻辑因为时机不对完全没起作用，甚至拦截器的401处理虽然能兜底刷新令牌，但控制台还是会出现讨厌的错误日志。下面给你几个实用的方案，结合你的现有代码调整就行：

方案1：监听认证完成信号，再发起菜单请求 #

这个思路是让菜单请求“等一等”，直到AuthGuard确认认证完成后再执行，最直观也最容易维护：

第一步：在AuthService里新增认证状态的可观察对象 #

先给你的认证服务加一个用来通知组件认证状态的信号：

// auth.service.ts
import { BehaviorSubject, Observable } from 'rxjs';

export class AuthService {
  // 用BehaviorSubject记录认证状态，初始为未认证
  private isAuthenticatedSubject = new BehaviorSubject<boolean>(false);
  // 对外暴露只读的可观察对象
  public isAuthenticated$: Observable<boolean> = this.isAuthenticatedSubject.asObservable();

  // ... 你的现有代码（refreshToken、setIdToken等）

  // 在认证成功时调用这个方法更新状态
  setAuthenticated(status: boolean) {
    this.isAuthenticatedSubject.next(status);
  }
}

第二步：在AuthGuard里更新认证状态 #

修改你的守卫，确保认证通过后通知全局状态：

// auth.guard.ts
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    // 这里是你原有的认证逻辑，比如检查令牌有效性/刷新令牌
    return this.authService.validateAuth().pipe(
      map(isValid => {
        if (isValid) {
          // 认证通过，更新全局状态
          this.authService.setAuthenticated(true);
          return true;
        }
        // 未认证则跳转到登录页
        this.router.navigate(['/login']);
        return false;
      })
    );
  }
}

第三步：修改app.component等待认证完成再加载菜单 #

现在让菜单请求监听认证状态，只有认证通过后才发起：

// app.component.ts
import { filter, take } from 'rxjs/operators';

ngOnInit(){
  // 监听认证完成信号，只取认证通过的状态，且只执行一次
  this.authService.isAuthenticated$.pipe(
    filter(isAuth => isAuth),
    take(1)
  ).subscribe(() => {
    this.httpService.getMenu().subscribe((response) => { 
      this.menuArray = response;
    });
  });
}

方案2：改进拦截器，让请求自动等待令牌就绪 #

如果不想依赖AuthGuard的状态，也可以在拦截器层面处理，让需要令牌的请求自动等令牌准备好（包括刷新令牌的过程），从根源避免401：

// token-interceptor.service.ts
export class TokenInterceptorService implements HttpInterceptor {
  private isRefreshing = false;
  private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  constructor(private injector: Injector) {}

  // 新增：获取有效令牌的方法，处理令牌过期/刷新逻辑
  private getValidToken(): Observable<string> {
    const authservice = this.injector.get(AuthService);
    const currentToken = authservice.setIdToken();
    
    // 如果当前令牌有效，直接返回
    if (currentToken && !this.isTokenExpired(currentToken)) {
      return of(currentToken);
    }

    // 令牌过期/不存在，触发刷新流程
    if (!this.isRefreshing) {
      this.isRefreshing = true;
      this.refreshTokenSubject.next(null);
      return authservice.refreshToken().pipe(
        map((token: any) => {
          this.isRefreshing = false;
          this.refreshTokenSubject.next(token.id_token);
          return token.id_token;
        })
      );
    } else {
      // 已有刷新请求在进行，等待刷新完成
      return this.refreshTokenSubject.pipe(
        filter(token => token != null),
        take(1)
      );
    }
  }

  // 辅助方法：判断JWT令牌是否过期
  private isTokenExpired(token: string): boolean {
    const decoded = JSON.parse(atob(token.split('.')[1]));
    return decoded.exp * 1000 < Date.now();
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.url === environment.authTokenPostUrl) {
      return next.handle(req.clone({}));
    } else {
      // 先获取有效令牌，再发起请求
      return this.getValidToken().pipe(
        switchMap(token => {
          const tokenReq = req.clone({ 
            setHeaders: { Authorization: `Bearer ${token}` } 
          });
          return next.handle(tokenReq);
        }),
        catchError(error => throwError(error))
      );
    }
  }

  // 原来的handle401Error方法可以移除了，因为现在请求前就确保令牌有效了
}

修改后，你的app.component.ts里的菜单请求可以保持原样，拦截器会自动处理令牌的准备工作，不会再触发401错误。

方案3：监听路由事件，等待认证路由加载完成 #

因为你的带canActivate的路由必须先经过AuthGuard认证，所以可以监听路由完成事件，当第一个认证路由加载成功后再加载菜单：

// app.component.ts
import { Router, NavigationEnd } from '@angular/router';
import { filter, take } from 'rxjs/operators';

constructor(private router: Router) {}

ngOnInit(){
  // 监听路由完成事件，确认当前路由是需要认证的路由后加载菜单
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd),
    filter(() => {
      // 检查当前路由是否配置了AuthGuard
      const currentRoute = this.router.routerState.root.firstChild;
      return currentRoute?.routeConfig?.canActivate?.includes(AuthGuard);
    }),
    take(1)
  ).subscribe(() => {
    this.httpService.getMenu().subscribe((response) => { 
      this.menuArray = response;
    });
  });
}

这个方案不需要修改AuthService，直接利用路由事件判断认证是否完成，适合不想改动太多现有代码的场景。

个人最推荐方案1，它把认证状态和业务逻辑清晰分离，代码可读性和维护性都更高。

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