Ejercicio de programación con Angular: Interceptores HTTP

Código
Práctica
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
  }
}
Empezar ejercicio de programación

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.

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

Angular

Interceptores HTTP basados en interfaz

Autenticación y autorización

Otros tutoriales de programación con Angular