Tutorial Angular: Interceptores HTTP basados en interfaz

Introducción

Angular ha evolucionado significativamente desde su primera versión, introduciendo características para mejorar el desarrollo de aplicaciones web modernas. Una de estas características son los interceptores HTTP, introducidos en Angular 4.3 como parte del módulo HttpClientModule. 

Su importancia radica en la capacidad de interceptar y manipular peticiones y respuestas HTTP, permitiendo una gestión centralizada de la autenticación, el manejo de errores, el logging, y más.

La habilidad de interceptar peticiones y respuestas HTTP permite a los desarrolladores implementar lógicas de manera global, evitando la repetición de código y promoviendo prácticas DRY (Don't Repeat Yourself). 

Desde su introducción, los interceptores se han convertido en una parte integral de las aplicaciones Angular, utilizados en una amplia gama de aplicaciones prácticas, desde el manejo de tokens JWT hasta la implementación de estrategias de caching eficientes.

Aplicaciones prácticas

Los interceptores HTTP tienen una amplia gama de usos:

• Autenticación y autorización: Añadir tokens de autenticación a las cabeceras de las peticiones automáticamente.
• Manejo de errores: Interceptación centralizada de errores para implementar estrategias de manejo como reintentos automáticos o redirecciones.
• Logging y auditoría: Registro de peticiones y respuestas para fines de auditoría y debugging.
• Caching: Almacenamiento en caché de respuestas para mejorar el rendimiento.

Crear un interceptor

Para ilustrar cómo se pueden usar los interceptores en Angular, consideremos un interceptor simple que agrega un encabezado de autenticación a todas las peticiones salientes.

Ejemplo de cómo crear un interceptor funcional con el comando ng generate interceptor auth:

Ejemplo del código generado:

import { HttpInterceptorFn } from '@angular/common/http';

export const authInterceptor: HttpInterceptorFn = (req, next) => {
  return next(req);
};

Puntos clave del código generado:

1. Importación del tipo HttpInterceptorFn: Primero, se importa HttpInterceptorFn de @angular/common/http. HttpInterceptorFn es un tipo que representa una función de interceptor HTTP. Esta función se puede usar para interceptar peticiones y respuestas HTTP.
2. Definición del interceptor: Se define una constante authInterceptor, la cual es asignada a una función que representa el interceptor en sí. Esta función es del tipo HttpInterceptorFn.
3. Parámetros de la función: La función interceptor recibe dos parámetros:
4. req: Este parámetro representa la petición HTTP que está siendo interceptada. Tiene el tipo HttpRequest<any>, lo cual significa que puede ser cualquier petición HTTP que tu aplicación realice.
5. next: Este es un objeto del tipo HttpHandler que representa el siguiente interceptor en la cadena de interceptores (si lo hay) o el transporte HTTP que finalmente enviará la petición. Al llamar a next.handle(), se pasa la petición al siguiente interceptor o al transporte HTTP.
6. Comportamiento del interceptor: En este ejemplo específico, el interceptor simplemente pasa la petición HTTP (req) al siguiente interceptor o al transporte HTTP sin hacer ninguna modificación. Esto se logra mediante la llamada a next(req).
7. Retorno de la función: La función retorna el resultado de next.handle(req), que es un Observable<HttpEvent<any>>. Este observable puede ser suscrito por Angular internamente para manejar la respuesta de la petición HTTP.

En resumen, este interceptor funcional está configurado pero no realiza ninguna operación en la petición HTTP; simplemente la pasa sin cambios.

Ejemplo básico: Autenticación con interceptores basados en interfaz

En este caso vamos a crear un ejemplo con interceptor basado en clases cuyo objetivo es añadir un token en la cabecera Authorization de las peticiones HTTP que viajan al backend desde angular.

Ejemplo de cómo crear un interceptor basado en clase con el comando ng generate interceptor auth --functional=false:

Paso 1: Define el interceptor AuthInterceptor.

import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {

  constructor(private authService: AuthService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // Obtener el token de autenticación desde el servicio de autenticación
    const authToken = this.authService.getToken();

    // Clonar la petición para añadir el encabezado de autorización
    const authReq = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${authToken}`)
    });

    // Enviar la petición clonada con el encabezado de autorización añadido
    return next.handle(authReq);
  }
}

En este código, AuthService es un servicio que la aplicación debe proporcionar para gestionar el estado de autenticación del usuario, incluyendo el almacenamiento y acceso al token de autenticación.

Paso 2: Registra el interceptor en el módulo principal usando HTTP_INTERCEPTORS.

Para aplicar este interceptor, se debe proporcionar en el módulo principal o en un módulo específico usando el HTTP_INTERCEPTORS token de Angular.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { AppComponent } from './app.component';
import { AuthInterceptor } from './auth.interceptor';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HttpClientModule],
  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

El multi: true permite a Angular manejar múltiples interceptores en una cadena.

Conceptos clave de interceptores HTTP en Angular

Los interceptores ofrecen varios puntos de control:

- Modificación de peticiones: Antes de que una petición sea enviada, se puede modificar, agregando encabezados, cambiando el cuerpo de la petición, o incluso cambiar la URL.
- Manejo de respuestas: Cuando una respuesta es recibida, se puede examinar y transformar antes de que la aplicación la consuma.
- Manejo de errores: Los interceptores son un lugar excelente para manejar errores globalmente.

Autenticación y autorización con interceptores

La autenticación y autorización son aspectos cruciales en la seguridad de las aplicaciones web modernas. Angular facilita la implementación de estos mecanismos a través del uso de interceptores HTTP. Un interceptor de autenticación se encarga de añadir tokens de seguridad, como JWT (JSON Web Tokens), a las cabeceras de las peticiones HTTP salientes, asegurando que las peticiones estén debidamente autorizadas.

Consideraciones:

• Asegura que AuthService proporcione el token de autenticación de manera sincrónica.
• Maneja adecuadamente los escenarios de tokens expirados o inválidos, considerando redirecciones o la renovación automática del token.
• Utiliza HTTPS para proteger los tokens de autenticación durante su transmisión.

Manejo de errores con interceptores

El manejo de errores es un aspecto crucial en el desarrollo de aplicaciones web, especialmente cuando se trata de peticiones HTTP. Angular ofrece una forma elegante de manejar errores globalmente utilizando interceptores HTTP. Al interceptar respuestas HTTP fallidas, se puede implementar una estrategia de manejo de errores centralizada, como mostrar mensajes de error, registrar errores para análisis posteriores o incluso implementar lógicas de reintento automáticas.

Ejemplo:  creación e implementación de un ErrorInterceptor

A continuación, se muestra cómo implementar un interceptor de manejo de errores que captura cualquier error en las peticiones HTTP y lo maneja de manera centralizada.

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 errorMessage = `Error Status: ${error.status}\nMessage: ${error.message}`;
        console.error(errorMessage);
        // Implementa aquí más lógica de manejo de errores.
        return throwError(errorMessage);
      })
    );
  }
}

Consideraciones

• Evita exponer información sensible en los mensajes de error.
• Implementa reintentos automáticos para manejar errores transitorios.

Interceptores HTTP en Angular 17

Interceptor funcional para capturar el token JWT del localStorage y enviarlo al backend en las peticiones HTTP:

Se activaría de la siguiente manera: