Cómo crear un interceptor en IONIC

Hola programador o programadora, ¿Quieres saber cómo crear un interceptor en IONIC? si has llegado hasta aquí es posible que quieres implementar JWT en tu app o que quieres optimizar la app, pues eso es exactamente lo que hace un interceptor.

¿Qué es un interceptor?

Un interceptor es un servicio que nos permite manejar peticiones y respuestas en la API, de esta forma nosotros seremos capaces de añadir cabeceras a las peticiones de forma genérica sin necesidad de tener que añadir las cabeceras en cada una de las peticiones. Del mismo modo, vamos a ser capaces de gestionar todos los errores de forma genérica. El fin de esto va a ser optimizar el código de tu app y además dejarla mucho más limpia.

Además gracias al interceptor vamos a ser capaces de poder implementar JWT de manera correcta, ya que nos va a permitir refrescar el token en vivo o llevar al usuario al login si así lo quisieramos.

Para una explicación más clara te dejo el vídeo en Youtube:

Como implementar un interceptor en IONIC

Lo primero que tenemos que hacer es crear el servicio en la ruta deseadal.

ionic generate service nombre_del_interceptor

Luego importamos el interceptor y las clases HTTP_INTERCEPTORS y HttpClientModule

import { InterceptorService } from './services/interceptor/interceptor.service';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

Y añadimos el provider

  providers: [
    StatusBar,
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true }
  ],

Luego para usar el interceptor debemos poner lo siguiente en el interceptor.service.ts o como hayamos llamado al servicio.

import { Injectable } from "@angular/core";
import {
HttpErrorResponse,
HttpEvent,
HttpHandler,
HttpInterceptor,
HttpRequest,
HttpResponse,
} from "@angular/common/http";
import { Observable, throwError } from "rxjs";
import { Router } from "@angular/router";
import { catchError, map } from "rxjs/operators";
import { ApiService } from "../api.service";</code>

@Injectable()
export class InterceptorService implements HttpInterceptor {

constructor(
private router: Router,
public apiService: ApiService,
) {

}

intercept(
req: HttpRequest,
next: HttpHandler
): Observable&lt;HttpEvent&gt; {
const token = localStorage.getItem("token");
const refresh = localStorage.getItem("refresh");

console.log("pasamos por el interceptor");

if (!token) {
return next.handle(req);
}

const headers = req.clone({
headers: req.headers.set("Authorization", `Bearer ${token}`)
.set('Client', 'app')
});

return next.handle(headers).pipe(
map((event: HttpEvent) =&gt; {
if (event instanceof HttpResponse) {
console.log('event---&gt;&gt;&gt;', event);
}
return event;
}),
catchError((error: HttpErrorResponse) =&gt; {
console.log('Sucedió un error: ' + error.status);
console.log(error.error.message.name);
if(error.status == 403){
console.log("El error es 403")
type resType = {access: string, refresh: string}
this.apiService.postRefresh(refresh).subscribe(
(res: resType) =&gt; {
console.log("Res refresh:",res);
const token = res.access;
const refresh = res.refresh;
console.log("token1", token)
console.log("refres1", refresh)
localStorage.setItem('token', token);
localStorage.setItem('refresh', refresh);
},
(err) =&gt; {
console.log("bad token");
this.router.navigate(["/login"]);
})
}
return throwError(error);
}));
}

}