Introdução ao Angular HttpInterceptor

Um Interceptor em Angular é um pattern simples que nos permite interceptar, tratar e gerenciar requisições http, antes mesmo delas serem enviadas ao servidor. Um bom exemplo disso, são os tokens de acesso, onde ao usuário logar no sistema, gera-se um token criptografado com informações relevantes sobre o acesso e esse token é inserido no Header de todas as requisições.

Pré-requisitos:

-node;
-angular/cli;

Para esse tutorial utilizaremos o componente padrão gerado pelo angular/cli.

// app.component.ts

Inicie um novo projeto:

ng new interceptorProject

Feito isso, crie uma pasta chamada interceptors dentro do diretório app:

Crie também dois arquivos dentro dela:

interceptor.module.ts
interceptor.service.ts

Até aqui definimos a estrutura do nosso interceptor, agora vem a parte legal: CODAR!

Dentro do arquivo interceptor.service.ts, defina os imports necessários, e implemente a interface HttpInterceptor assinando o seu método intercept.

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

@Injectable()
export class Interceptor implements HttpInterceptor {
 intercept( request: HttpRequest<any>, next: HttpHandler ):                   Observable<HttpEvent<any>> {
  console.log(request);
  return next.handle(request);
 }
}

Entendendo o código:

Os importsHttpEvent, HttpInterceptor, HttpHandler e HttpRequest fazem parte do novo HttpClient do Angular 4+, e a partir deles conseguimos tratar as requisições. O return next.handle(request) passa a diante o objeto modificado contendo nossa request.

Agora devemos injetar esse service interceptor dentro do nosso module de interceptor, para podermos reutilizar no componente de nossa aplicação, abra o arquivo:

interceptor.module.ts

e implemente o seguinte código:

import { NgModule } from '@angular/core';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { Interceptor } from './interceptor.service';
@NgModule({
 providers: [
  Interceptor,
  {
    provide: HTTP_INTERCEPTORS,
    useClass: Interceptor,
    multi: true,
  },
 ],
})
export class InterceptorModule {}

Desta forma, o nosso módulo de interceptor possui como provider o serviço que definimos para tratamento de nossas requisições.

Agora importe o InterceptorModule e o HttpClientModule no módulo principal da aplicação:

 // app.module.ts
import { HttpClientModule } from '@angular/common/http';
import { InterceptorModule } from './interceptors/interceptor.module';

@NgModule({
 declarations: [
  AppComponent
 ],
 imports: [
  BrowserModule,
  HttpClientModule,
  InterceptorModule
 ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Feito isso nossa aplicação já está pronta para utilizar o nosso interceptor!!

Vamos criar um método para efetuar requisições, dentro do arquivo app.component.ts. Iremos buscar os personagens de Star Wars.

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private _http: HttpClient) { }

 getStarWarsAPI() {
  return this._http
   .get('https://swapi.co/api/people/')
   .subscribe(data => {
     console.log(data);
  });
 }
}

Após isso, vamos criar um button no arquivo app.component.html que irá disparar uma requisição.

<button (click)="getStarWarsAPI()">Star Wars Characters</button>

Ao acessarmos a aplicação e clicarmos no botão, podemos ver nosso interceptor sendo acionado:

Um ponto que não pode deixar de ser dito, é o conceito de imutabilidade de uma request, por exemplo, se tentarmos setar um header no nosso interceptor diretamente na request, não irá funcionar, pois o objeto request é imutável:

// - Isso não funciona
// request.headers.set('Authorization:', 'Bearer JWT01010101')

Para isso, utilizamos o conceito de clonar o objeto de request, e alterar esse objeto clonado de forma bem simples:

@Injectable()
export class Interceptor implements HttpInterceptor {
 intercept( request: HttpRequest<any>, next: HttpHandler ): Observable<HttpEvent<any>> {
  request = request.clone({
   setHeaders: {
     Authorization: 'Bearer JWT01010101'
   }
  });
  return next.handle(request);
 }
}

E desta forma o nosso header, no exemplo o Authorization, estará na request headers:

Link do projeto no github:

https://github.com/matheusBizutti/angular-http-interceptor-sample

Valeu galera!