2

Estou buscando uma forma de interceptar todas as requisições HTTP feitas pelo angular e adicionar alguns headers. Nas versões anteriores ao angular2 RC5 (antes do NgModule) era dessa forma, por exemplo:

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));

Atualmente estou na versão 2.0 final e conforme pesquisa sobre como isso seria implementado nesta versão, seria algo similar a isso:

@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()}); }
}

Que apresenta o seguinte erro: TypeError: Cannot read property 'merge' of null. Como pode ser visto neste exemplo.

Obs: A implementação de MyOptions é a mesma de BaseRequestOptions, copiei pois se utilizar BaseRequestOptions em { provide: RequestOptions, useClass: BaseRequestOptions}, tudo funciona, como pode ser observado neste exemplo.

1 Resposta 1

1

Crie uma classe de interceptação:

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpHandler, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class RequestInterceptor implements HttpInterceptor {
    constructor() { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            req = req.clone({
                headers: req.headers.set('NOME', 'VALOR') //setar os headers que você quer
            });
        return next.handle(req);
    }
}

E no app.module.ts, adicione o seguinte objeto na property providers:

{
   provide: HTTP_INTERCEPTORS,
   useClass: RequestInterceptor,
   multi: true
}

Dessa forma todas as requisições feitas passarão por esse interceptador.

Documentação do Angular

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .