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';@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(errorMsg);
   })
   );
   }
   }

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

   @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.