👨💻Functional route guards en
HTML-код
- Опубликовано: 3 июн 2023
- En este nuevo tutorial de #angular veremos cómo implementar functional route guards para que la rutas de tu aplicación estén protegidas y puedas controlar el acceso por rol, credenciales o condiciones de los usuarios y servicios de tus componentes.
Todo esto lo agregamos al proyecto de #angular16 mostrado en el vídeo anterior, por lo que tienes ya disponible el #codigo actualizado en el repositorio de #github
En el vídeo usamos los #guards #canActivate y #canMatch de Angular y explicamos también para qué sirven los demás tipos.
¡Déjame saber si te ha sido útil y, como siempre, que tengas buen código!
#programacionenespañol
Enlaces de interés:
===============
- Repositorio con el código: github.com/pedrovelasquez9/an...
- Documentación de guards: angular.io/guide/router-tutor...
- Tutorial Angular 16: • #Angular MODERNO v16: ...
- Redes de la comunidad: programacion-es.dev/redes/
Conviértete en miembro de este canal para disfrutar de ventajas, sorteos exclusivos dentro de la comunidad y un badge con tu imagen de perfil en la web de Programación en español:
/ @programacion-es 
Наука
Excelente aporte a la comunidad!!
Mil gracias! Un saludo y que tengas buen código!
vengo de un curso que usaba los guards deprecados (como clases) me sirvió mucho, gracias!
Esooooo muchas gracias por comentar! Me alegra un montón que te haya sido útil, un saludo y que tengas buen código!!
muchas gracias por la explicación 👍👍
Muchas gracias a ti por comentar! Un saludo y que tengas buen código!!
Grande gracias
Gracias a ti por comentar! Un saludo y que tengas buen código!!
Gracias por el aporte el deprecated me tenia lokisimo jaja
ashdgashjdgashjgd suele pasar xD, me alegra que te haya sido útil, un saludo y que tengas buen código!
Muchas gracias!
Muchas gracias a ti por comentar! Un saludo y que tengas buen código!!
uyyy muy bueno saludos
Mil gracias por comentar!!! 😎🤘👨💻
Gracias!
A ti por comentar! =)
buenisimo
¡Esoooo, mil gracias!
Justo tenia un problema con canActivate del guards q estaba obsoleta y pude corregir error, este video
Esooooo me alegra un montón que te haya sido útil =) Un saludo y que tengas buen código!!!
Good Code ;D
😎🤘👨💻
Podrias hacer explicar tambien para otro framework como vue ?
Me lo anoto, pero ojo con la comparación, Vue no es otro lenguaje, es otro framework y tanto angular como vue como react, next, etc. parten del mismo lenguaje (JavaScript) y soportan el uso de TypeScript =)
BRU-U-TAAAL
Esoooo 😎🤘👨💻
Gracias por el aporte; tengo un problema y quisiera compartirlo a ver si me podrias ayudar. Estoy injectando mi servicio, pero todas las propiedades del servicio aparecen nulas, aun cuando el servicio ya ha sido inicializado y usado para hacer el login, ya obtuvo el token y todo lo necesario, pero al momento de usarlo en el Guard, simplemente las propiedades del servicio estan vacias.
Que me falta? que podría estar omitiendo? De antemano mil gracias.
Mmm, puede ser la manera de inyectarlo o el momento en que se carga, si puedes, abre un hilo en el foro de ayuda de discord con todo el detalle que puedas, si tienes el código en un repo público de Github para poder revisarlo también sería genial. En este enlace tienes el link al server de Discord: programacion-es.dev/redes/
hola gracias por el video, tengo una duda si me puedes porfavor ayudar, como puedo implemtar si en una app el cliente me pide, que necesita un enlace, en el cual usuarios puedan ingresar interactuar con alguna informacion alli, al igual que guardar datos, pero que entren sin la necesidad de loguearse y pues estando seguro de que no van a poder ingresar a ningun otro aparte de la app, gracias!!
Puedes poner la ruta de la página que quieres tener pública para todos y el resto protegerlas con credenciales verificando a través de un guard si, por ejemplo, hay un token de sesión o información del usuario en sessionStorage o el storage que uses para los datos, si no los hay, no le dejas entrar y le muestras un mensaje de error o lo redireccionas a la página pública de nuevo =)
Hola, tengo un error de "localStorage is not defined" cuando trata de ir a una ruta, el guard hace uso del localstorage para obtener un valor y depende de ello si retorna un true o false; por ejemplo si uno trata de ingresar a una ruta sin logearse, y el guard no encuentra una variable en el localstorage que se crea al logearse, lo redirige al login; Y si funciona, pero cada vez que se usa el guard aparece ese error en la terminal y es molesto, hay forma de solucionarlo?, agregando uso los todos los archivos con inject en vez del constructor.
Mmm, lo primero que me viene a la mente es que tengas el SSR activo en el proyecto o, si estás usando versiones anteriores a la 17, que estés usando angular universal y por eso no tenga acceso a localstorage, también échale un ojo a esto angular.dev/guide/di/di-in-action#custom-providers-with-inject
@@programacion-es gracias por la ayuda, y si estoy usando el SSR y por lo pronto declaré una condicional en el servicio tipo: isLocalStorageAvailable = typeof localStorage !== 'undefined';, si era undefined hacia un console.info y retornaba null y si no hacia la peticipon como tal, no es una solucion defnitiva pero almenos redusco a una linea de codigo tipo console, de varias lineas en rojo.
Como se haria para utilizar el router en guard? se puede inyectar como el servicio
Si, puedes inyectar el router con inject y usarlo dentro del guard =)
@@programacion-esgracias bro por responder, antes ponía un if si estaba logeado y en el false colocaba this.router.navigate y la ruta del login pero eso lo intente hacer y me dice el método no es una función. :(
@@fredygarcia7844 en los funcionales tendrías que inyectar el router con inject: const router = inject(Router); y luego lo puedes usar: router.navigate(['/tu-ruta']);
@@programacion-es hice todo pero me sale router.navigate is not a function
TypeError: router.navigate is not a function, en el false tengo return router.navigate(['auth/login']);
el problema es el inject lo tenia la I mayuscula muchas gracias Bro xD
supongo q tengo q acutalizar mi cli porque me lo sigue generando con el deprecate
En efecto, los functional route guards están disponibles desde la versión 14.2 =)