Protege RUTAS y evita PÉRDIDA de datos en formularios con functional Guards | 19

Sobre esta lección

En este video aprenderás a implementar guards en Angular para proteger rutas y evitar pérdidas de datos en formularios. Veremos en detalle cómo funcionan los guards más usados: CanActivate: Restringe el acceso a rutas según la autenticación del usuario. CanDeactivate: Advierte a los usuarios antes de abandonar formularios con cambios sin guardar. Además, te enseñaré a crear un TokenStorageService para gestionar la autenticación usando Signals, integrándolo con guards y formularios dinámicos. Al final del video, serásapaz de controlar la navegación según el estado de autenticación y evitar la pérdida accidental de datos en formularios. Lo que aprenderás en este video: 🔐 CanActivate: Cómo proteger rutas y redirigir al login si el usuario no está autenticado. 📝 CanDeactivate: Cómo avisar al usuario si intenta salir de un formulario sin guardar. 💾 Crear un TokenStorageService: Guardar el token en LocalStorage usando Signals. 🔄 Actualizar menús dinámicamente según el estado de autenticación. 🛑 Implementar logout y control de sesión. ⏲️ Índice de contenido con timestamps: 00:00 - Introducción: ¿Qué son los Guards en Angular y por qué usarlos? 00:30 - Tipos de Guards en Angular: CanActivate, CanDeactivate, CanLoad y Resolve 02:48 - Creación del TokenStorageService con Signals 06:55 - Implementación del CanActivate Guard para rutas protegidas 08:42 - Configuración de rutas con CanActivate 09:08 - Validación del token y prueba de navegación 11:50 - Dinamización del menú según autenticación (isLogin) 12:40 - Implementación del método logout y navegación al login 16:30 - Creación del CanDeactivate para formularios 21:00 - Creación de la HeroUnsavedChanges Guard 22:23 - Configuración de CanDeactivate en rutas 22:47 - Confirmación al salir si hay cambios sin guardar 24:40 - Pruebas finales y mejores prácticas con Guards ------------------ RECURSOS ------------------- 💻 Repositorio del proyecto: https://github.com/puntotech/angular-renaissance-fundamentals-workshop -----------------------------------------