Interceptors en Angular: Guía Completa para Manipular Solicitudes HTTP
Aprende a utilizar interceptors en Angular para manipular solicitudes y respuestas HTTP. Descubre cómo mejorar la seguridad y eficiencia de tus aplicaciones con ejemplos prácticos e integraciones.
Tabla de Contenidos
- Tabla de Contenidos
- Introducción
- ¿Qué es un Interceptor en Angular?
- Creación de un Interceptor
- Registro de un Interceptor
- Manipulación de Solicitudes HTTP
- Interceptors Anidados
- Ejemplos Prácticos
- Video Tutorial
- Conclusión
Introducción
Los interceptors en Angular son una herramienta poderosa para manipular solicitudes y respuestas HTTP antes de que lleguen a su destino final. Con ellos, puedes añadir headers, manejar errores de manera centralizada, y realizar tareas como autenticación y logging.
¿Qué es un Interceptor en Angular?
Un interceptor es un servicio de Angular que implementa la interfaz HttpInterceptor. Su principal función es interceptar y modificar las solicitudes y respuestas HTTP. Esto permite realizar operaciones transversales sin modificar el código de los componentes que realizan las solicitudes.
Creación de un Interceptor
Para crear un interceptor en Angular, primero necesitas generar un servicio que implemente la interfaz HttpInterceptor.
import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable()
export class MyInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const modifiedReq = req.clone({
headers: req.headers.set('Authorization', `Bearer MY_TOKEN`)
});
return next.handle(modifiedReq);
}
}
Registro de un Interceptor
Una vez creado el interceptor, debes registrarlo en el módulo principal de tu aplicación. Esto se hace proporcionando el interceptor en el array de HTTP_INTERCEPTORS.
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { MyInterceptor } from './my-interceptor.service';
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true }
]
})
export class AppModule { }
Manipulación de Solicitudes HTTP
Agregar Headers
Los interceptors son ideales para agregar headers de manera automática a cada solicitud HTTP, como tokens de autenticación.
const modifiedReq = req.clone({
headers: req.headers.set('Authorization', `Bearer MY_TOKEN`)
});
Manejo de Errores
Centralizar el manejo de errores con interceptors te permite mantener tu código más limpio y manejable.
import { catchError } from 'rxjs/operators';
import { throwError } from 'rxjs';
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req).pipe(
catchError((error) => {
// Manejar el error aquí
return throwError(error);
})
);
}
Interceptors Anidados
Puedes tener múltiples interceptors anidados. Angular garantiza que se ejecuten en el orden en el que fueron proporcionados.
@NgModule({
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: FirstInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: SecondInterceptor, multi: true }
]
})
export class AppModule { }
Ejemplos Prácticos
Autenticación
Un interceptor para agregar tokens de autenticación a todas las solicitudes.
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authToken = 'YOUR_AUTH_TOKEN';
const authReq = req.clone({
headers: req.headers.set('Authorization', `Bearer ${authToken}`)
});
return next.handle(authReq);
}
}
Logging
Un interceptor para loggear todas las solicitudes y respuestas.
@Injectable()
export class LoggingInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('Request:', req);
return next.handle(req).pipe(
tap(event => {
if (event instanceof HttpResponse) {
console.log('Response:', event);
}
})
);
}
}
Video Tutorial
Para una guía visual sobre cómo usar interceptors en Angular, incluyendo cómo implementar un spinner o loader en peticiones HTTP, mira el siguiente video:
Conclusión
Los interceptors en Angular son una herramienta esencial para manejar solicitudes HTTP de manera eficiente y centralizada. Al dominar su uso, puedes mejorar significativamente la arquitectura y mantenimiento de tus aplicaciones Angular.
