Un interceptor en Angular es una clase que se utiliza para interceptar solicitudes HTTP y respuestas HTTP.
Los interceptores se pueden utilizar para realizar tareas como añadir un encabezado de autorización a todas las solicitudes, manejar errores de servidor de manera uniforme o agregar una barra de carga a la aplicación mientras se realizan solicitudes.
Para utilizar un interceptor, primero debe crear una clase que implemente la interfaz HttpInterceptor
. Esta interfaz define un método intercept
, que se ejecuta cada vez que se realiza una solicitud o se recibe una respuesta. En este método, puede realizar cualquier acción necesaria antes o después de la solicitud o la respuesta, como modificar encabezados o manejar errores.
Una vez que ha creado su interceptor, debe registrarlo en el inyector de dependencias de Angular mediante el método HTTP_INTERCEPTORS
de la clase HttpClientModule
.
Aquí hay un ejemplo de cómo crear un interceptor para añadir un encabezado de autorización a todas 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>> { // Clone the request and set the new header in one step. const authReq = req.clone({headers: req.headers.set('Authorization', 'my-auth-token')}); // send the newly created request return next.handle(authReq); } }
Luego, puede registrar el interceptor en su módulo de aplicación mediante el siguiente código:
import { HTTP_INTERCEPTORS } from '@angular/common/http'; import { AuthInterceptor } from './auth-interceptor'; @NgModule({ // ... providers: [ { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true } ] }) export class AppModule {}
Las ventajas que obtenemos al usar interceptores son:
- Los interceptores le permiten centralizar la lógica de manipulación de solicitudes y respuestas HTTP en un solo lugar, lo que hace que su código sea más fácil de mantener y depurar.
- Los interceptores le permiten modificar solicitudes y respuestas de manera uniforme y consistente sin tener que agregar código adicional a cada componente o servicio que realiza solicitudes HTTP.
- Los interceptores le permiten realizar tareas comunes como añadir encabezados de autorización a todas las solicitudes o manejar errores de servidor de manera uniforme en toda la aplicación.
- Los interceptores le permiten agregar funcionalidad adicional a la aplicación, como una barra de carga mientras se realizan solicitudes o una pantalla de inicio de sesión para proteger ciertas rutas.
En resumen, los interceptores son una herramienta muy útil en Angular para manipular solicitudes y respuestas HTTP de manera centralizada y consistente en toda la aplicación.