Angular拦截器提前执行导致Token未定义的解决方法求助

问题根源在于你用同步变量存储Token，但登录请求是异步操作，拦截器执行时Token还未被赋值。要解决这个问题，需要用异步流管理Token状态，确保拦截器能拿到最新的Token值后再处理请求。

步骤1：改造AuthService，用BehaviorSubject存储Token #

BehaviorSubject是RxJS中的可观察对象，既能保存当前最新值，又能在值变化时通知所有订阅者，完美适配Token的异步更新场景。同时将Token持久化到localStorage，避免页面刷新后丢失。

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { BehaviorSubject, Observable, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthService {
  // 初始化时从localStorage读取Token，避免刷新丢失
  private tokenSubject = new BehaviorSubject<string | null>(localStorage.getItem('token'));
  // 对外暴露可观察对象，供拦截器订阅获取最新Token
  public token$ = this.tokenSubject.asObservable();

  constructor(private http: HttpClient) {}

  login(email: any, password: any): Observable<{ token: string }> {
    return this.http.post<{ token: string }>(
      'http://localhost:3000/login',
      { payload: { email, password } },
      { headers: new HttpHeaders({ 'Content-Type': 'application/json' }) }
    ).pipe(
      tap(res => {
        // 更新Token到BehaviorSubject
        this.tokenSubject.next(res.token);
        // 持久化到localStorage
        localStorage.setItem('token', res.token);
        console.log(res.token);
      })
    );
  }

  // 同步获取当前Token（供其他非异步场景使用）
  getToken(): string | null {
    return this.tokenSubject.value;
  }
}

步骤2：改造拦截器，等待Token就绪再处理请求 #

拦截器通过switchMap操作符，先订阅Token的可观察对象，拿到最新Token后再克隆请求并添加Authorization头。同时跳过登录请求，避免给登录请求添加无效的Token头。

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
import { switchMap } from 'rxjs/operators';
import { AuthService } from './auth.service';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 跳过登录请求，无需添加Authorization头
    if (req.url.includes('/login')) {
      return next.handle(req);
    }

    // 等待Token就绪后再处理请求
    return this.authService.token$.pipe(
      switchMap(token => {
        let authReq = req;
        if (token) {
          authReq = req.clone({
            headers: req.headers.set('Authorization', `Bearer ${token}`)
          });
        }
        return next.handle(authReq);
      })
    );
  }
}

步骤3：组件中调用login方法（优化） #

不要在AuthService内部直接订阅login请求，返回Observable让组件订阅，方便处理登录成功/失败的业务逻辑（比如页面跳转）：

// 组件代码示例
this.authService.login(email, password).subscribe({
  next: () => {
    // 登录成功后跳转到首页
    this.router.navigate(['/home']);
  },
  error: (err) => {
    // 处理登录失败提示
    console.error('登录失败', err);
  }
});

方案优势 #

1. 实时Token同步：登录请求成功后，Token会立即推送到BehaviorSubject，拦截器能实时获取最新值。
2. 异步等待机制：通过switchMap将Token流与请求流结合，确保只有拿到有效Token（或确认无Token）后才发送请求。
3. 持久化防丢失：localStorage存储Token，页面刷新后BehaviorSubject会自动加载初始值，拦截器依然能拿到有效Token。

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