Angular中HttpInterceptor成员变量token无法持久化的解决方法

问题描述 #

我编写了一个拦截器服务，用于为每个HTTP请求添加认证头。调用setToken方法后，下次发起HTTP请求时token仍为undefined，无法保持有效。

服务代码 #

@Injectable ()
export class HttpInterceptorService implements HttpInterceptor
{
    token : string = undefined;
    
    setToken (token : string)
    {
        
        this.token = token;
        console.log ("interceptor set token", this.token);
    }
    
    intercept (req : HttpRequest <any>, next : HttpHandler) : Observable <HttpEvent <any>>
    {
        if (this.token != undefined)
        {
            console.log ("add token");
            let cloned : any = req.clone ({ headers: req.headers.append ("Authorization", this.token) });
            return next.handle (cloned);
        }
        else
        {
            console.log ("no token");
            return next.handle (req);
        }
    }
}

模块配置 #

...
providers: [
{
 provide: HTTP_INTERCEPTORS,
 useClass: HttpInterceptorService,
 multi: true
}
...

解决方案 #

1. 用BehaviorSubject管理token状态 #

普通变量在异步场景下易出现状态同步问题，改用BehaviorSubject存储token，既能保证状态在订阅者间实时同步，也能适配拦截器的异步处理逻辑：

修改后的拦截器代码：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { take, switchMap } from 'rxjs/operators';

@Injectable()
export class HttpInterceptorService implements HttpInterceptor {
  // 用BehaviorSubject存储token，初始值为undefined
  private tokenSubject = new BehaviorSubject<string | undefined>(undefined);

  setToken(token: string) {
    this.tokenSubject.next(token);
    console.log("interceptor set token", token);
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    return this.tokenSubject.pipe(
      take(1), // 取当前最新的token值
      switchMap(token => {
        if (token) {
          console.log("add token");
          const clonedReq = req.clone({ 
            headers: req.headers.append("Authorization", token) 
          });
          return next.handle(clonedReq);
        } else {
          console.log("no token");
          return next.handle(req);
        }
      })
    );
  }
}

2. 确保拦截器是单例 #

Angular中HTTP拦截器默认应为单例，需保证仅在**根模块（如AppModule）**的providers中注册拦截器，避免在其他模块重复提供导致创建多个实例：

// AppModule.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpInterceptorService } from './http-interceptor.service';

@NgModule({
  declarations: [/* 组件声明 */],
  imports: [/* 模块导入 */],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpInterceptorService,
      multi: true
    }
  ],
  bootstrap: [/* 根组件 */]
})
export class AppModule { }

3. 正确注入拦截器实例 #

调用setToken时，必须通过Angular依赖注入获取拦截器实例，禁止手动new创建实例（否则会生成非单例的新对象）：

// 示例登录组件
import { Component } from '@angular/core';
import { HttpInterceptorService } from './http-interceptor.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html'
})
export class LoginComponent {
  constructor(private interceptor: HttpInterceptorService) {}

  onLoginSuccess(token: string) {
    // 通过注入的实例调用setToken
    this.interceptor.setToken(token);
  }
}

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