Interceptores HTTP funcionales

Avanzado
Angular
Angular
Actualizado: 27/08/2024

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

Qué es un interceptor

Un interceptor en Angular permite interceptar peticiones HTTP antes de que sean enviadas al backend. 

¿Te está gustando esta lección?

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

Esto puede utilizarse para agregar información extra en las cabeceras de las peticiones HTTP que se envían al backend y de esta forma ofrecer información extra.

Un claro ejemplo es el de enviar el token JWT obtenido tras un login al backend en cada petición. Esto permite al backend conocer qué usuario es el que está navegando.

Crear un interceptor funcional

Ejecutar el comando:

ng generate interceptor authentication/jwt

Esto genera el archivo jwt.interceptor.ts con este contenido:

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


export const jwtInterceptor: HttpInterceptorFn = (req, next) => {

  return next(req);
};

Desarrollar el interceptor

Agregar código en el interceptor que permita añadir una cabecera Authorization en las peticiones HTTP.

¿Para qué sirve la cabecera Authorization? Para enviar información de la autenticación del usuario al backend, como por ejemplo el token JWT, de este modo el backend puede conocer qué usuario es el que está navegando.

Clonamos la request HTTP agregándole la cabecera mencionada:

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


export const jwtInterceptor: HttpInterceptorFn = (req, next) => {
  const token = localStorage.getItem("jwt_token");
  if(token) {
    req = req.clone({
      headers: req.headers.set('Authorization', `Bearer ${token}`)
    });
  }
  return next(req);
};

Activar el interceptor

Para poder utilizar el interceptor debemos activarlo a nivel de HttpClient para que se utilice en las peticiones HTTP enviadas al backend.

En el archivo app.config.ts agregamos la configuración global del HttpClient con el interceptor:

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { jwtInterceptor } from './authentication/jwt.interceptor';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    // Configurar HttpClientModule globalmente:
    // agregar jwtInterceptor para enviar token JWT a backend en peticiones HTTP
    provideHttpClient(withInterceptors([jwtInterceptor])),
  ]
};

Si tenemos componentes standalone que importan HttpClientModule entonces ya no es necesario importarlo ya que eso sobreescribiría la configuración global que acabamos de crear.

Por tanto nuestros componentes standalone no necesitan HttpClientModule en imports, ejemplo:

@Component({
  selector: 'app-book-list',
  standalone: true,
  imports: [RouterLink, NgbAlertModule],
  templateUrl: './book-list.component.html',
  styleUrl: './book-list.component.css'
})
export class BookListComponent {

// Aquí se inyecta el HttpClient global configurado en app.config.ts
constructor (private httpClient: HttpClient) {}
}

Comprobar funcionamiento interceptor

Teniendo frontend, backend y base de datos en ejecución, realizaríamos un login con las credenciales de un usuario y el backend generaría un token JWT.

El AuthenticationService guarda el token en el localStorage.

El interceptor carga el token JWT del localStorage en cada petición HTTP.

Para verificar que se carga correctamente abrimos la consola del navegador y comprobamos que aparece el token en las cabeceras de la petición (request).

Token JWT en cabecera Authorization

Verificamos que aparece la cabecera Authorization con el token.

IMPORTANTE: hay que iniciar sesión para que se haya generado el token y navegar para que se lancen peticiones al backend para traer datos. No confundir las cabeceras de la respuesta con las cabeceras de la petición.

Aprendizajes de esta lección

Completa Angular y certifícate

Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.

Asistente IA

Resuelve dudas al instante

Ejercicios

Practica con proyectos reales

Certificados

Valida tus conocimientos

Más de 25.000 desarrolladores ya se han certificado con CertiDevs

⭐⭐⭐⭐⭐
4.9/5 valoración