Ionic3.9.2&Angular5升级后，app.module.ts中angular-jwt+Storage报非法构造函数错误求助

我之前在Ionic 3.9.2 + Angular 5的项目里也踩过这个坑——angular-jwt直接和Ionic Storage结合时，很容易因为Storage的异步特性触发“非法构造函数”错误。下面给你两个经过验证的解决方案，都能实现让token随每个HTTP请求自动发送的需求：

方案1：改用Angular HttpInterceptor（更灵活，推荐） #

直接用Angular原生的拦截器来手动处理token注入，完全绕开angular-jwt的兼容性问题，还能自定义更多请求逻辑。

步骤1：创建Token拦截器 #

新建一个token.interceptor.ts文件，编写拦截逻辑：

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 TokenInterceptor implements HttpInterceptor {
  constructor(private storage: Storage) {}

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

步骤2：在AppModule中注册拦截器 #

打开app.module.ts，把拦截器添加到提供商列表：

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { TokenInterceptor } from './token.interceptor'; // 替换成你的文件路径
import { IonicStorageModule } from '@ionic/storage';

@NgModule({
  imports: [
    ...
    IonicStorageModule.forRoot() // 确保Storage模块已注册
  ],
  providers: [
    ...
    {
      provide: HTTP_INTERCEPTORS,
      useClass: TokenInterceptor,
      multi: true
    }
  ]
})
export class AppModule {}

方案2：调整angular-jwt的tokenGetter实现（保留angular-jwt） #

如果你坚持要用angular-jwt，核心是处理Storage的异步特性，让tokenGetter返回一个Observable，同时正确注入Storage：

步骤1：编写tokenGetter工厂函数 #

在app.module.ts中添加：

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

// 用工厂函数注入Storage，返回异步获取token的逻辑
export function tokenGetter(storage: Storage) {
  return () => storage.get('token');
}

步骤2：配置JwtModule #

修改@NgModule的imports部分：

@NgModule({
  imports: [
    ...
    JwtModule.forRoot({
      config: {
        tokenGetter: tokenGetter,
        allowedDomains: ['你的API域名'], // 比如 'api.example.com'
        disallowedRoutes: ['你的API域名/login'] // 登录接口不需要带token
      }
    })
  ],
  providers: [Storage]
})
export class AppModule {}

额外注意事项 #

1. 确保@ionic/storage已正确安装：执行npm install @ionic/storage --save
2. Angular 5对@auth0/angular-jwt的版本有要求，建议安装^1.2.0版本，过高版本不兼容Angular 5
3. 登录成功后，记得用this.storage.set('token', 你的后端返回token)把token存入Storage

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