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<HttpEvent> { 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) => { if (event instanceof HttpResponse) { console.log('event--->>>', event); } return event; }), catchError((error: HttpErrorResponse) => { 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) => { 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) => { console.log("bad token"); this.router.navigate(["/login"]); }) } return throwError(error); })); } }
Deja tu comentario