Ejercicio de programación con Angular: Interceptores HTTP
Código
0h 10m
Ejercicios Angular Interceptores HTTP. Domina el uso de interceptores HTTP en Angular mediante ejercicios prácticos y ejemplos claros.
Crea un interceptor que no solo añada un encabezado de autorización con el token a las peticiones HTTP salientes, sino que también maneje situaciones en las que el token haya expirado.
Instrucciones:
- Inyecta un servicio de autenticación (AuthService) y un router (Router) de Angular en tu interceptor.
- En el método intercept, obtén el token de autenticación utilizando el servicio AuthService.
- Si el token existe y es válido, clona la petición para añadir el encabezado Authorization con el valor del token.
- Si el token está expirado, limpia el token y utiliza el Router para redirigir al usuario a la página de inicio de sesión. Además, retorna un Observable que finalice la cadena sin enviar la petición HTTP original. . Esto se puede hacer usando el operador
EMPTY
de RxJS.
Código base para empezar y completar:
import { Injectable } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest } from '@angular/common/http';
import { Observable, EMPTY } from 'rxjs';
import { AuthService } from './auth.service';
import { Router } from '@angular/router';
@Injectable()
export class AuthExpiredInterceptor implements HttpInterceptor {
constructor(private authService: AuthService, private router: Router) {}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
const authToken = this.authService.getToken(); // Método ficticio para obtener el token
// Si el token existe y es válido, modifica la petición para añadir el encabezado de autorización
// Si el token ha expirado, limpia el token y redirige al usuario a la página de inicio de sesión
// Retorna EMPTY para finalizar la cadena de observables
}
// Si no hay token, simplemente pasa la petición sin modificar
}
}
Todos los ejercicios de programación de Angular
Evalúa tus conocimientos con ejercicios de programación en Angular de tipo Test, Puzzle, Código y Proyecto con VSCode.
Signals en Angular
Puzzle
Guards funcionales
Test
Decodificar JWT en Angular
Test
Servicio con HttpClient
Código
Ciclo de vida de componentes en Angular
Test
Gestión de productos de Fake Store API
Proyecto
Data binding en Angular
Test
Routes sin módulos en Angular
Código
Router en Angular
Test
Instalación de Angular
Puzzle
Route Guards basados en interfaces
Código
La directiva @if en Angular
Puzzle
Formularios reactivos en Angular
Código
Servicios en Angular
Puzzle
Interceptor funcional
Test
Servicio con Array
Código
La directiva @for en Angular
Puzzle
Componentes standalone true
Puzzle
Formularios con ngModel en Angular
Puzzle
Certificados de superación de Angular
Supera todos los retos de Angular y obtén estos certificados de superación para mejorar tu currículum y tu empleabilidad.
Tutorial para resolver este ejercicio de programación
Angular
Interceptores HTTP basados en interfaz
Autenticación y autorización