Ejercicio de programación con Angular: Route Guards basados en interfaces
Código
Ejercicios Angular Route Guards. Domina el uso de Route Guards en Angular mediante ejercicios prácticos y ejemplos detallados.
Crea los siguientes 3 archivos:
1. auth.service.ts
- Implementa un servicio de autenticación que tenga métodos para iniciar sesión (
login), cerrar sesión (logout) y verificar si el usuario está autenticado (isLoggedIn).
2. auth.guard.ts
- Implementa una clase
AuthGuardque use la interfazCanActivate. - El
AuthGuarddebe utilizar elAuthServicepara comprobar si el usuario está autenticado. - Si el usuario no está autenticado, el
AuthGuarddebe redirigir a la ruta '/login' y devolver false. - Si el usuario está autenticado, el
AuthGuarddebe permitir el acceso a la ruta solicitada devolviendo true.
3. app-routing.module.ts
- Configura las rutas para 'home', 'login' y una ruta comodín.
- Aplica el
AuthGuardespecíficamente a la ruta 'home' para protegerla.
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
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
Interceptores HTTP
Código
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
Route Guards basados en interfaces
Autenticación y autorización