Uso de interceptores en Angular

Los interceptores en Angular son una herramienta poderosa que permite interceptar y modificar solicitudes HTTP salientes y respuestas entrantes antes de que lleguen a la aplicación. Se usan comúnmente para agregar encabezados, manejar errores globalmente, y gestionar autenticación.

¿Qué es un Interceptor?

Un interceptor es un servicio de Angular que implementa la interfaz HttpInterceptor. Se registra en la cadena de middleware HTTP y se usa para interceptar y manipular solicitudes HTTP y respuestas.

Implementación Básica

1. Crear el Interceptor:Primero, genera un nuevo interceptor utilizando Angular CLI:

   ng generate interceptor auth

2. Implementar el Interceptor: Abre el archivo generado (auth.interceptor.ts) y modifica el código para implementar la lógica del interceptor. Aquí hay un ejemplo que agrega un token de autenticación a las solicitudes:

   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
   import { Observable } from 'rxjs';
   
   @Injectable()
   export class AuthInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       // Obtener el token de autenticación (esto es solo un ejemplo)
       const authToken = 'YOUR_AUTH_TOKEN_HERE';
   
       // Clonar la solicitud y agregar el encabezado de autorización
       const authReq = req.clone({
         setHeaders: {
           Authorization: `Bearer ${authToken}`
         }
       });
   
       // Enviar la solicitud modificada
       return next.handle(authReq);
     }
   }

    

3. Registrar el Interceptor: Luego, registra el interceptor en el módulo principal (app.module.ts):

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

    

Uso Avanzado

Los interceptores pueden encadenarse para manejar tareas complejas, como reintentos automáticos de solicitudes fallidas o el manejo global de errores:

1. Manejo de Errores:

   import { Injectable } from '@angular/core';
   import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpErrorResponse } from '@angular/common/http';
   import { Observable, throwError } from 'rxjs';
   import { catchError } from 'rxjs/operators';
   
   @Injectable()
   export class ErrorInterceptor implements HttpInterceptor {
     intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
       return next.handle(req).pipe(
         catchError((error: HttpErrorResponse) => {
           let errorMsg = '';
   
           if (error.error instanceof ErrorEvent) {
             // Error del lado del cliente
             errorMsg = `Error: ${error.error.message}`;
           } else {
             // Error del lado del servidor
             errorMsg = `Error Code: ${error.status}\nMessage: ${error.message}`;
           }
   
           console.log(errorMsg);
           return throwError(() => new Error(errorMsg));
         })
       );
     }
   }
   

2. Registro Múltiple:Puedes registrar varios interceptores en el módulo principal:

   import { NgModule } from '@angular/core';
   import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { AuthInterceptor } from './auth.interceptor';
   import { ErrorInterceptor } from './error.interceptor';
   
   @NgModule({
     // ...
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: AuthInterceptor,
         multi: true
       },
       {
         provide: HTTP_INTERCEPTORS,
         useClass: ErrorInterceptor,
         multi: true
       }
     ],
     // ...
   })
   export class AppModule { }
   

    

Conclusión

Los interceptores de Angular son una manera efectiva de manejar aspectos transversales relacionados con las solicitudes HTTP en tu aplicación, mejorando la seguridad, el manejo de errores y la experiencia del usuario. Con una implementación adecuada, puedes simplificar y centralizar la lógica de las solicitudes HTTP.