sábado 21 diciembre 2024

Cómo excluir peticiones en un interceptor en Angular

Los interceptores en Angular son útiles para capturar y modificar las solicitudes HTTP antes de que se envíen o para procesar las respuestas. Sin embargo, en algunas situaciones es necesario excluir ciertas peticiones de la lógica aplicada por el interceptor.

Implementar exclusión en un interceptor

En Angular, puedes usar condiciones dentro del método intercept del interceptor para filtrar las solicitudes que no deseas procesar. Esto se hace verificando el objeto HttpRequest antes de aplicar cualquier lógica. Un enfoque común es basarse en la URL de las solicitudes.

Pasos detallados

1. Crear el interceptor: Asegúrate de tener un interceptor configurado en tu proyecto. Si no tienes uno, créalo usando el CLI de Angular:

ng generate interceptor MyInterceptor

2. Verificar la URL o condiciones específicas: En el método intercept, puedes utilizar req.url para comprobar si la solicitud debe excluirse.

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>> {
       // Definir las URLs que se deben excluir
       const excludedUrls = ['https://api.example.com/login', 'https://api.example.com/register'];

       // Verificar si la solicitud está en la lista de exclusión
       if (excludedUrls.some(url => req.url.includes(url))) {
         return next.handle(req); // Omitir el interceptor para estas URLs
       }

       // Aplicar lógica a las demás solicitudes
       const modifiedReq = req.clone({
         setHeaders: {
           Authorization: `Bearer ${localStorage.getItem('token')}`
         }
       });

       return next.handle(modifiedReq);
     }
   }

3. Registrar el interceptor: En el módulo principal de tu aplicación (o donde manejes los interceptores), registra este interceptor en el array de providers:

import { HTTP_INTERCEPTORS } from '@angular/common/http';
   import { MyInterceptor } from './my-interceptor';

   @NgModule({
     providers: [
       {
         provide: HTTP_INTERCEPTORS,
         useClass: MyInterceptor,
         multi: true
       }
     ]
   })
   export class AppModule {}

Consideraciones adicionales

Condiciones dinámicas: Si la lógica para excluir solicitudes es más compleja (por ejemplo, basada en encabezados o parámetros de consulta), puedes expandir la condición en el interceptor.
Uso de un servicio centralizado: Si deseas administrar las URL excluidas en un lugar único, considera crear un servicio que almacene estas reglas y que pueda ser inyectado en el interceptor.

Ejemplos prácticos

1. Excluir peticiones a un endpoint específico:

if (req.url === 'https://api.example.com/health-check') {
     return next.handle(req);
   }

2. Excluir peticiones con ciertos parámetros:

if (req.params.has('skipInterceptor')) {
     return next.handle(req);
   }

Referencia oficial

Consulta la documentación oficial de Angular sobre interceptores para obtener más detalles sobre su implementación y personalización.

Etiquetas:

typescript angular

Creado por:

Jorge García

Fullstack developer