Ya está liberada la versión 4.3 del popular framework Angular  y con esta vienen un montón de características nuevas. Quizá la más esperada por los desarrolladores es la interfaz HttpInterceptor que hasta ahora no había una forma ideal de modificar las peticiones Http antes de ser enviadas. En AngularJS sí teníamos esta opción (interceptor), lo cual era extraño que en las versiones posteriores a esta no estuviera.

Pero para que sirve HttpInterceptor? HttpInterceptor es una interfaz que se ejecuta antes de enviar una petición http a un servicio, comunmente se usa para adjuntar la información de autenticación del usuario a la peticiones, en especial la autenticación basada en Web Tokens enviada por medio del header Authorization con un esquema Bearer.

Vamos a ver cómo usar HttpInterceptor para realizar peticiones a Endpoints que necesiten de un usuario autenticado, voy a usar un poco la estructura de Ionic Super (Es un kit completo para empezar una nueva app) para hacer el tutorial más corto.

Crear Interceptor

Tenemos que tener un servicio/provider para el manejo de las peticiones, en Ionic Super tenemos un provider en src/providers/api/api.ts. Ahora supongamos que cuando un usuario inicia sesión guardamos el ‘token‘ que recibimos del servicio web en el LocalStorage y ya lo tenemos en el storage del navegador. Creamos un archivo llamado src/providers/api/token-interceptor.ts y pegamos el siguiente código:

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

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

    constructor() {}

    intercept(request: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
        let headers: any;
        // Si el usuario está logueado, de lo contrario no adjuntar estos headers
        // pues puede que el endpoint que estamos llamando es el Login o Register
        // los cuales no requerir que el usuario esté autenticado, sería estupido.
        if (localStorage.getItem('token')) {
            // Adjuntamos los headers a la petición
            headers = new HttpHeaders({
                'Authorization': 'Bearer ' + localStorage.getItem('token'),
                'Content-Type': 'application/json',
                'Accept': 'application/json'
            });
        }
        const cloneReq = request.clone({headers});

        return next.handle(cloneReq);
    }
}

Para que esto funcione debemos importar TokenInterceptor y HTTP_INTERCEPTORS en app.module.ts

import { TokenInterceptor } from '../providers/api/token-interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';

Y en providers colocar lo siguiente

providers: [
    // ..
    { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true },
    // ..
]

Con esto configurado probamos desde nuestro Front hacer una petición al servicio web que estemos consumiendo y verificamos los headers.