Usando HTTP Interceptors en Angular

Aprende cómo usar HTTP_Interceptors en Angular de forma fácil.

Antes de empezar ¿Qué demonios es un “HTTP Interceptor”?, bueno vamos a explicarlo en un caso de uso, en Angular, cuando hacemos peticiones a un API, normalmente nos piden una token de autorización, o una api key, o alguna otra cosa por las cabeceras, muchas personas lo que hacen es que en cada servicio o petición API, incluye la cabecera en los servicios, o, generan un servicio general para el API y ahí lo incluyen, sin embargo, esto se puede hacer más sencillo usando un HTTP Interceptor.

Y así como su nombre mismo dice, “intercepta” la petición HTTP, la modifica (si se requiere) y entonces continua su camino, esto es excelente ya que como menciono se ahorra código y se puede integrar por partes donde haya cuestiones comúnes y no queramos saturar los servicios.

Bueno, lo primero que hay que hacer es generar nuestro HTTP Interceptor, en este caso pensaremos que usaremos localStorage para leer una token de autorización que enviaremos en cada petición al back-end para obtener datos:

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';@Injectable()
export class AuthInterceptor implements HttpInterceptor {
   intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const token = localStorage.getItem('auth_token');
      if (!token) {
         return next.handle(req);
      }
      const headers = req.clone({
         headers: req.headers.set('Authorization', `Bearer ${token}`)
      });
      return next.handle(headers);
   }
}

Vamos a explicar un poco, primero los imports que necesitamos, después generamos un Interceptor a forma de servicio ( @Injectable() ) , luego invocamos el método intercept que obtendrá la petición y la alterará (como su nombre lo dice “intercepta”), retornando un Observable . Una vez dentro, mandamos traer la token, si no existe, dejamos que la petición siga su camino, al final, no la podemos a iterar ya que la token no existe. Sin embargo, si existe, lo siguiente a realizar es que la petición se modifique, asignando un header de tipo Authorization con el valor de Bearer + la token y entonces, ahora si, retornamos la nueva petición que será enviada.

Así de simple. Ahora, hay que integrar el interceptor en nuestro módulo. Para ello, abriremos nuestro app.module y haremos el respectivo import:

import { AuthInterceptor } from './interceptors/auth.interceptor';

Obviamente, la ruta de ./interceptors/... cambiará en sus casos donde hayan colocado el interceptor. Y después, dentro del array de providers en el @NgModule irá colocado el interceptor:

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  exports: [
    ...
  ]
})

Y listo, nuestro interceptor está listo y funcional para empezar a enviar esa auth_token 😉

No te olvides de seguirme, dejar tu clap y cualquier duda, dejar tu comentario.

¿Cuál es tu reacción?
+1
0
+1
0
+1
0
+1
0
+1
1
Total
0
Shares
Publicación anterior

Es oficial, Elon Musk compra Twitter

Siguiente Publicación

TypeError: toUpperCase is not a function en JavaScript

Publicaciones Relacionadas