Uso de interceptores en Angular

6/6/2024

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

**Crear el Interceptor:**Primero, genera un nuevo interceptor utilizando Angular CLI:“ `ng generate interceptor auth```
**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 , next: HttpHandler): Observable > { // 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); } }
**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:

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 , next: HttpHandler): Observable > { 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)); }) ); } }
**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.

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.