升级Ionic 3.9.2+Angular5后，集成storage与angular-jwt遇非法构造函数错误

我之前在做类似技术栈的项目时也碰到过这个问题，核心原因是angular-jwt的初始化时机和Ionic Storage的异步初始化机制不兼容——angular-jwt在启动时会同步调用tokenGetter，但此时Ionic Storage可能还没完成初始化，导致依赖注入出错，抛出"非法构造函数"的异常。下面给你几个经过验证的可行方案：

方案一：改用原生localStorage同步存取令牌（最简单） #

Ionic Storage本质上在Web环境下也是封装了localStorage，对于跨平台场景（iOS/Android WebView），原生localStorage同样可靠。改用同步的localStorage可以避开异步初始化的问题：

1. 存储令牌时：

// 登录成功后保存令牌
localStorage.setItem('auth_token', response.jwtToken);

2. 配置angular-jwt：

import { JwtModule } from '@auth0/angular-jwt';

@NgModule({
  imports: [
    JwtModule.forRoot({
      config: {
        // 同步从localStorage获取令牌
        tokenGetter: () => localStorage.getItem('auth_token'),
        // 配置你的API白名单域名
        whitelistedDomains: ['your-api-domain.com'],
        // 可选：排除不需要带令牌的路径
        blacklistedRoutes: ['your-api-domain.com/public/']
      }
    })
  ]
})
export class AppModule {}

这个方案代码改动最小，适合快速解决问题。

方案二：自定义HTTP拦截器替代angular-jwt（最灵活） #

如果不想依赖angular-jwt，自己实现HTTP拦截器可以完全控制令牌的添加逻辑，完美适配Ionic Storage的异步特性：

1. 创建JWT拦截器服务：

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/mergeMap';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor(private storage: Storage) {}

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 异步从Storage获取令牌，再处理请求
    return this.storage.get('auth_token').mergeMap(token => {
      if (token) {
        // 克隆请求并添加Authorization头
        request = request.clone({
          setHeaders: {
            Authorization: `Bearer ${token}`
          }
        });
      }
      return next.handle(request);
    });
  }
}

2. 在AppModule中注册拦截器：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { JwtInterceptor } from './services/jwt.interceptor'; // 替换成你的拦截器路径

@NgModule({
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: JwtInterceptor,
      multi: true // 允许多个拦截器
    }
  ]
})
export class AppModule {}

这个方案的优势是不受第三方库版本限制，还能扩展更多逻辑（比如令牌过期自动刷新、错误处理等），是生产环境中更推荐的方式。

方案三：调整angular-jwt初始化逻辑（兼容性一般） #

如果一定要保留angular-jwt，可以尝试用工厂函数延迟令牌获取，确保Storage已初始化：

import { JwtModule } from '@auth0/angular-jwt';
import { Storage } from '@ionic/storage';

// 定义令牌获取的工厂函数
export function tokenFactory(storage: Storage) {
  return () => storage.get('auth_token');
}

@NgModule({
  imports: [
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenFactory,
        whitelistedDomains: ['your-api-domain.com']
      }
    })
  ],
  providers: [Storage]
})
export class AppModule {}

不过这个方案偶尔还是会因为Angular的依赖注入顺序问题出错，所以优先级低于前两个方案。

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