angular - 拦截来自 Angular2 的所有 HTTP 请求

Question

我正在寻找一种方法来拦截 Angular 发出的所有 HTTP 请求并添加一些 header 。在 angular2 RC5 之前的版本(NgModule 之前)就是这样，例如:

class MyOptions extends BaseRequestOptions {
    Authorization: string = 'Bearer ' + localStorage.getItem('tokenName');
}

bootstrap(AppComponent,
    [HTTP_PROVIDERS,
        { provide: RequestOptions, useClass: MyOptions },
    appRouterProviders,
    disableDeprecatedForms(),
    provideForms(),
]).catch(err => console.error(err));

我目前使用的是 2.0 Final 版本，并且为 research on how this would be implemented in this version会是类似这样的东西:

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  providers: [
    { provide: RequestOptions, useClass: MyOptions }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

@Injectable()
export class MyOptions extends RequestOptions {
  constructor() { super({method: RequestMethod.Get, headers: new Headers()}); }
}

它显示以下错误:TypeError:无法读取 null 的属性“merge”。可以看出this example .

Note: The implementation of MyOptions is the same as BaseRequestOptions, copied, because if you use BaseRequestOptions in {Provide: RequestOptions, useClass: BaseRequestOptions}, everything works, as can be seen this example.

Answer 1

我在您的代码中发现两个错误

• 您没有导入RequestMethod

• 您必须在 NgModule 之前声明扩展类 MyOptions 装饰器

这样你的演示将看起来像 Plunker