Перехватить все HTTP-запросы от angular2

Я ищу способ перехватить все HTTP-запросы, сделанные angular, и добавить некоторые заголовки. В релизах до 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, и поскольку исследование того, как это будет реализовано в этой версии, будет примерно таким:

@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: Can not read property 'merge' of null. Как видно из этого примера.

Примечание. Реализация MyOptions такая же, как BaseRequestOptions, скопировано, так как при использовании BaseRequestOptions в {Provide: RequestOptions, useClass: BaseRequestOptions} все работает, как видно в этом примере.


person Fernando Leal    schedule 30.09.2016    source источник


Ответы (2)


Я вижу две ошибки в вашем коде

  • Вы не импортировали RequestMethod

  • Вы должны объявить свой расширенный класс MyOptions перед декоратором NgModule

Таким образом, ваша демонстрация будет выглядеть как Plunker.

person yurzui    schedule 30.09.2016
comment
RequestMethod был деталью, основная проблема заключалась в порядке объявления класса. Идеальная поправка, спасибо. Несмотря на то, что это глупая ошибка, ее очень сложно идентифицировать, но нет смысла видеть ваш ответ. - person Fernando Leal; 30.09.2016

вы можете посмотреть ниже вопросы StackOverflow, они подробно говорят об этом,

https://stackoverflow.com/questions/35498456/what-is-httpinterceptor-equivalent-in-angular2

Перехватчики в Angular2

person Madhu Ranjan    schedule 30.09.2016
comment
Хорошо, я уже видел некоторые из этих тем, эти вопросы и ответы, охватывающие предыдущий подход к тому, как это должно быть сделано (угловой предыдущий RC 5), как показано в начало вопроса. Но в моем случае проблема именно с текущей версией углового (angular 2.0 final). - person Fernando Leal; 30.09.2016