Angular
Tutorial Angular: Interceptores HTTP funcionales
Angular interceptores funcionales: manejo. Aprende a manejar interceptores funcionales en Angular con ejemplos prácticos y detallados.
Aprende Angular y certifícateQué es un interceptor
Un interceptor en Angular permite interceptar peticiones HTTP antes de que sean enviadas al backend.
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).
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.
Otros ejercicios de programación de Angular
Evalúa tus conocimientos de esta lección Interceptores HTTP funcionales con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.
Signals en Angular
Guards funcionales
Decodificar JWT en Angular
Servicio con HttpClient
Ciclo de vida de componentes en Angular
Gestión de productos de Fake Store API
Data binding en Angular
Routes sin módulos en Angular
Router en Angular
Instalación de Angular
Route Guards basados en interfaces
La directiva @if en Angular
Formularios reactivos en Angular
Servicios en Angular
Interceptor funcional
Servicio con Array
La directiva @for en Angular
Interceptores HTTP
Componentes standalone true
Formularios con ngModel en Angular
Routes en Angular
Comunicación entre componentes Angular
Parámetros en rutas con ActivatedRoute
CRUD de Restaurantes y Platos
Tablas en Angular Material
Formulario de registro de usuarios
Instalación y uso de NgBoostrap
Desarrollo de componentes Angular
JWT en Angular
Formularios reactivos en Angular
Formularios en Angular Material
Layout con Angular Material
Effects en Angular
Data binding
HttpClient en servicios de Angular
Desarrollo de módulos Angular
Comandos Angular CLI
Subir archivo en formularios
La directiva routerLink en Angular
Todas las lecciones de Angular
Accede a todas las lecciones de Angular y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.