Ionic3 HttpClient拦截器如何从Storage获取JWT Token并添加至请求头？

我明白你的困扰——用硬编码Token时一切正常，但从Ionic Storage动态获取Token时，首次访问页面就失效。问题的核心其实是Ionic Storage的初始化是异步的，APP启动初期Storage还没准备好，此时调用getToken()会拿到null或者undefined，导致请求头里的Token无效。

下面是适配新版HttpClientModule的完整解决方案：

第一步：完善AuthProvider的Token获取逻辑 #

先确保我们的getToken()方法会等待Storage初始化完成后再获取Token，避免返回空值：

// src/providers/auth/auth.ts
import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class AuthProvider {
  constructor(private storage: Storage) {}

  // 用async/await确保Storage就绪后再取Token
  async getToken(): Promise<string | null> {
    await this.storage.ready(); // 等待Storage初始化完成
    return this.storage.get('auth_token'); // 替换成你存储Token的key
  }
}

第二步：修改拦截器代码，处理Token为空的情况 #

更新拦截器，使用RxJS的管道操作符来处理异步Token，并在Token不存在时跳过添加请求头：

// src/http-interceptor.ts
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Injectable } from "@angular/core";
import { Observable, throwError } from "rxjs";
import { AuthProvider } from "../providers/auth/auth";
import { fromPromise } from 'rxjs/observable/fromPromise';
import { mergeMap, catchError } from 'rxjs/operators';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private auth: AuthProvider) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 将Promise转为Observable，统一处理异步逻辑
    return fromPromise(this.auth.getToken()).pipe(
      mergeMap(token => {
        let modifiedRequest = req;
        
        // 只有当Token存在时，才添加Authorization请求头
        if (token) {
          modifiedRequest = req.clone({
            headers: req.headers.set('Authorization', `Bearer ${token}`)
          });
        }
        
        // 发送修改后的请求
        return next.handle(modifiedRequest);
      }),
      catchError(error => {
        // 可选：添加错误处理，比如Token过期时跳转登录页
        console.error('拦截器请求错误:', error);
        return throwError(error);
      })
    );
  }
}

第三步：确保拦截器在AppModule中正确注册 #

最后要确认拦截器已经在根模块中注册，这样Angular才能识别并使用它：

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './http-interceptor'; // 替换成你的拦截器路径

@NgModule({
  declarations: [/* ... */],
  imports: [/* ... */],
  bootstrap: [/* ... */],
  entryComponents: [/* ... */],
  providers: [
    // 注册拦截器
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true // 允许多个拦截器存在
    }
  ]
})
export class AppModule {}

为什么之前的代码首次访问无效？ #

APP启动时，Ionic Storage还在初始化过程中，此时直接调用getToken()会立即返回null，导致请求头里的Authorization字段是Bearer null，后端自然会拒绝这个请求。通过await this.storage.ready()，我们确保了只有在Storage完全就绪后才去获取Token，首次访问时也能拿到正确的值。

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