如何将Ionic LocalStorage设为同步？解决HTTP拦截器异步取值问题

嘿，这个坑我之前做Angular项目的时候也踩过！拦截器默认是同步执行的，但如果你的LocalStorage是异步封装的（比如用了Promise或Observable版本的存储服务），直接在拦截器里拿值肯定会出现请求先发送、头部没加上的情况。给你三个实用的解决方案，按需选就行：

方案一：用RxJS操作符把异步操作转成Observable流 #

如果你的存储服务返回的是Promise，我们可以用RxJS的from()把它转成Observable，再通过switchMap等待拿到值之后再处理请求，确保请求发送前头部已经配置完成。

示例代码：

import { from } from 'rxjs';
import { switchMap } from 'rxjs/operators';

// 你的拦截器类
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  // 假设你的异步存储方法是getItemAsync，返回Promise
  return from(this.storageService.getItemAsync('authToken')).pipe(
    switchMap((token) => {
      // 克隆请求并添加头部（如果拿到了token）
      const modifiedRequest = token 
        ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
        : req;
      // 继续处理请求
      return next.handle(modifiedRequest);
    })
  );
}

方案二：如果是原生LocalStorage，直接同步取值 #

哦对了，原生的localStorage本身是同步的！如果你只是用了原生API，那根本不用搞异步那一套，直接在拦截器里同步拿值就行：

示例代码：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = localStorage.getItem('authToken');
  const modifiedRequest = token 
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next.handle(modifiedRequest);
}

要是你之前误以为原生LocalStorage是异步的，那这个方案最省事。

方案三：提前把存储值加载到内存中（推荐高频场景） #

如果你的请求很多，每次都去异步取存储会有性能损耗，那可以在APP初始化时就把需要的存储值加载到服务的内存变量里，拦截器直接从内存拿同步值，同时维护内存和存储的一致性。

步骤1：创建Auth服务管理token #

import { Injectable } from '@angular/core';
import { StorageService } from './storage.service'; // 你的异步存储服务

@Injectable({ providedIn: 'root' })
export class AuthService {
  private _token: string | null = null;

  constructor(private storageService: StorageService) {}

  // APP初始化时调用，加载token到内存
  async init(): Promise<void> {
    this._token = await this.storageService.getItemAsync('authToken');
  }

  // 获取内存中的token
  get token(): string | null {
    return this._token;
  }

  // 设置token时同时更新内存和存储
  set token(newToken: string | null) {
    this._token = newToken;
    if (newToken) {
      this.storageService.setItemAsync('authToken', newToken);
    } else {
      this.storageService.removeItemAsync('authToken');
    }
  }
}

步骤2：配置APP初始化时加载token #

在app.module.ts里添加APP_INITIALIZER，确保APP启动时先加载token：

import { APP_INITIALIZER } from '@angular/core';
import { AuthService } from './auth.service';

providers: [
  {
    provide: APP_INITIALIZER,
    useFactory: (authService: AuthService) => () => authService.init(),
    deps: [AuthService],
    multi: true
  }
]

步骤3：拦截器里直接用内存中的token #

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const token = this.authService.token;
  const modifiedRequest = token 
    ? req.clone({ setHeaders: { Authorization: `Bearer ${token}` } })
    : req;
  return next.handle(modifiedRequest);
}

这个方案既解决了异步问题，又提升了请求性能，适合需要频繁加请求头的场景。

内容的提问来源于stack exchange，提问作者Eve-Sama