#13 Programando un sistema de ventas real | Proteger rutas con Guard y pantalla de login en Angular

#programación #hdeleon #curso
En este video te enseñare como proteger tus rutas ligadas a componentes con los Guard de Angular, también haremos la pantalla visual de login.
Si quieres apoyarme y darme para una cerveza puedes hacerlo por aquí: paypal.me/HectorDeLeonGuevara
Puedes apoyarme desde 0.5 USD al mes uniéndote como miembro al canal aquí: / @hdeleonnet
También puedes vía patreon: / powerhdeleon
Todos los videos de este curso: • Programando un sistema...
Comando para crear Entity Framework: Scaffold-DBContext "Server=localhost;Database=VentaReal;Trusted_Connection=True;" Microsoft.EntityFrameworkCore.SqlServer -OutputDir Models
Todos mis podcasts: • Podcast #1 - ¿Cuál es ...
Curso de MVC .Net: • Curso de MVC .Net C#| ...
Curso de MVC Api .Net: • Curso de MVC API .Net ...
Curso de facturación electrónica en c# .Net: • ¿Cómo convertir archiv...
Todos mis videos sobre facturación electrónica: • ¿Cómo convertir archiv...
La falta de respeto tanto a mí como a cualquier otra persona y el SPAM son razones de bloqueo en mi canal.
"Copyright Disclaimer Under Section 107 of the Copyright Act 1976, allowance is made for "fair use" for purposes such as criticism, comment, news reporting, teaching, scholarship, and research. Fair use is a use permitted by copyright statute that might otherwise be infringing. Non-profit, educational or personal use tips the balance in favor of fair use"
---------------------------------------------------------------------------------------------------------------
Sigueme en twitter ⇒ / powerhdeleon
Sigueme en facebook ⇒ / hdeleon666
Mi Sitio web ⇒ hdeleon.net

[@hdeleonnet]

Si te ha gustado el video puedes dejarme un like y compartirlo en tus redes sociales, muchísimas gracias Siguiente video: kzbin.info/www/bejne/jmHCnWivhbmLnKM

[@ReoArrieta]

Hola hdelon tengo un problema con la librería material con el componente matSelect cuando le doy editar un producto no me retorna los datos pero le manda el ID y cuando le quitó la propiedad matSelect y lo dejo solo el Select de HTML si me retorna el ID, me dicen que material no deja el autoChange por si me podrías ayudarme

[@NicolasMelendez10]

Hola Hector, primero que nada muy buen curso te felicito. Tengo una duda al colocar el canActivate ya no me muestra la página y se pone solo en blanco, no redirecciona tampoco a '/login' , pero si le saco el canActivate:[AuthGuard] al primer path osea que quede {path:'',redirectTo:'/home',pathMatch: 'full'}, ahi si me anda

[@ivanvillarreal429]

me pasa lo mismo y me fue de gran ayuda tu comentario

[@diegobarrera5699]

gracias, llevaba varias horas buscando y nada hasta que vi tu comentario

[@wenacabros9676]

es más, si vas a la consola del navegador angular te dice que no puedes usar authguard y redirectTo al mismo tiempo. En este caso da igual porque ir a la direccion /' ' te redirige a /home que tambien tiene el authGuard

[@uriasleonjorgealberto5708]

te amoooooooooooo estaba batallando un chingo krnal pero ya quedo gracias a tu comentario y no es broma

[@edwinoswaldorodriguezleton5437]

Vi muchas veces el anterior para entender mejor, justo a tiempo llegó el siguiente video. Gracias Hector.

[@waltertorres5699]

Excelente vídeo gracias por aclarar de manera muy sencilla el mejo del Guard con angular.

[@loloserbmonysodillepa5520]

estoy todo el tiempo mirando las notificaciones para ver el siguiente este canal es adictivo...

[@hdeleonnet]

se van a sorprender

[@ivanvazquez7691]

Excelente, gracias Héctor

[@jerson4387]

Gracias por el video Hector lo veo de madrugada como todo buen friki XD

[@lordcuy8147]

Wohoooi vamos avanzando :D!

[@TonicoBonico]

Tome su like, señor.

[@hoeangeru2]

Sin duda sos la mera verga y no lo digo por lame botas, sino porque si me siento ayudado con este curso, yo que tanto me cuesta aprender a programar pero lo haces percibir tan bien este curso, muchas gracias.

[@danielmeza7156]

¡Señor! 🔥

Se avanza es importante

[@cifz]

Preciso!

[@roddy_21_25]

Esto es para los que estan teniendo problemas con el CanActivate. Si, esta deprecated, ya no se usa esa version, si no una que se llama CanActivateFn, pero el error que genera el usar CanActivate al comienzo del video no es precisamente porque este deprecated. El error por el cual se queda la pantalla en blanco es porque hay un conflicto en el modulo de rutas y el guard. es decir: Este error se produce porque estos dos atributos (redirectTo y CanActivate) no pueden usarse juntos en una sola definición de ruta, ya que redirectTo indica una redirección y canActivate se utiliza para controlar la activación de una ruta, Segun CHATgpt. Si vamos al modulo de ruta, El maestro tiene: const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuard], }, { path: 'home', component: HomeComponent, canActivate: [AuthGuard], }, { path: 'cliente', component: ClienteComponent, canActivate: [AuthGuard], }, { path: 'login', component: LoginComponent, } ]; Si tienes el codigo igual al del maestro, posiblemente te salga un error y una pantalla en blanco. la forma de solucionar esto es comentando el guard de la ruta que tiene un redirectTo. es decir, este es el codigo. const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full', // canActivate: [AuthGuard], }, { path: 'home', component: HomeComponent, canActivate: [AuthGuard], }, { path: 'cliente', component: ClienteComponent, canActivate: [AuthGuard], }, { path: 'login', component: LoginComponent, } ]; Listo, con esto deberia de funcionarles y aun asi, se puede seguir con el curso. Ahora, si quieren usar una version mas actualizada, con CanActivateFn, pues este es el codigo que tienen que poner en el Guard. Eliminan todo el codigo que pone el maestro desde @Injectable({providedIn: 'root'}) para abajo, (sin borrar el @Injectable({providedIn: 'root'})) y pegas esto: class AuthGuard { constructor(private router: Router) {} canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean { this.router.navigate(['/login']); return false; } } export const AuthGuardActive: CanActivateFn = (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean => { return inject(AuthGuard).canActivate(next, state); } y en el modulo de rutas: const routes: Routes = [ { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuardActive], }, { path: 'home', component: HomeComponent, canActivate: [AuthGuardActive], }, { path: 'cliente', component: ClienteComponent, canActivate: [AuthGuardActive], }, { path: 'login', component: LoginComponent, } ]; Espero haber ayudado :)

[@juan__ignacio]

Muchas gracias Heroe sin capa

[@cuak65]

Por si tienen un error que me a pasado al parecer la palabra secreta no puede ser tan pequeña , debe tener un largo considerable saludos

[@gabrielgarcia976]

Hola Hector, cuando subes otro video de este curso? Excelente material!!!! Saludos

[@hdeleonnet]

Es el sig

[@giuliuploader]

Hola Hector..Gracias por tus videos..Que pasa si caduca el token del usuario, eso faltaria detectarlo y mandar al login

[@adolphin6041]

Pregunta: ¿Como mando el token en el header de la respuesta de la api, por que por ahora solo se que la api me manda la respuesta solo en el body, pero dicen que es peligroso mandarlo por ahí ?

[@jeelonmt8117]

Al momento de colocar el canActivate ya no me muestra la página y se pone solo en blanco, no redirecciona tampoco a '/login' , alguien puede ayudarme por favor?

[@123pedro8]

Me pasa lo mismo. De momento (11:30) he quitado el canActivate de la primera ruta path:' ' para seguir el vídeo.

[@user-ud8uv4eh6b]

crees que puedas actualizar la aprte del canActivate, en versiones posteriores ya no funciona

[@diego_solis]

Hola Hector, en el proyecto de angular obtengo el error 401 en ves del 400, en postman si me funciona.. Ni si quiera me entra al metodo del backend, que puedo hacer?

[@MrElmarqueli]

bueno si de alguna manera se puede ayudar ya ire compartiendo tus videso un saludo y muy buenos tus videos y explicaciones saludos!!!! 🍺

[@hdeleonnet]

Compartir siempre ayuda, gracias Marco

[@diegopallares7110]

tengo otro error al final final, cuando intento hacer el login a mi siempre me sale el estatus en 401, sera por el error que tengo de que no reconoce las variables email y Password 17:28

[@renatoyufratozo2984]

llegamos a los 180 :D que vengan mas videos :D

[@hdeleonnet]

es el que sigue

[@xalitoarriaza844]

buen video, pero, como puedo resolver esto en angular 11: Error: Invalid configuration of route '': redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed. at validateNode (router.js:2328) at validateConfig (router.js:2290) at Router.resetConfig (router.js:4304) at new Router (router.js:3891) at Object.setupRouter [as useFactory] (router.js:5776) at Object.factory (core.js:11446) at R3Injector.hydrate (core.js:11363) at R3Injector.get (core.js:11183) at injectInjectorOnly (core.js:4706) at Module.ɵɵinject (core.js:4710)

[@freyseripanaque3501]

@@melissanoriega6789 Lo que podrías hacer es cambiar de : "{ path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuard] }," y quitarle el canActivate "{ path: '', redirectTo: '/home', pathMatch: 'full' }" con esto me funcionó

[@MatiasSanchez48]

@@freyseripanaque3501 clavee este comentario

[@andreinagomezromero4293]

@@freyseripanaque3501 me salia eso mismo y ya lo iva a dejar xd

[@diegopallares7110]

@@freyseripanaque3501 uff gracias !!

[@marioalbertopaezcastillo7487]

Hola Héctor, muy buen video, solo que a mi me regresa un 401, cuál podrá ser el error? gracias por tu ayuda

[@marioalbertopaezcastillo7487]

Muchas gracias, ya vi cuál era el error, estaba poniendo [Authorize] en el controller, de la api.

[@davidantoniogonzalezgonzal6627]

Este error que significa? Es cuando quiero que todas las paginas me redireccionen a mi login gg ----Error: Invalid configuration of route '': redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed.

[@gerardoquiroz4588]

hola chicos, excelentes videos, tengo este mismo problema. "main.ts:12 Error: Invalid configuration of route '': redirectTo and canActivate cannot be used together. Redirects happen before activation so canActivate will never be executed."

[@icedarkskull]

ya somos 3

[@xalitoarriaza844]

ya somos 4

[@sebastianacosta9165]

me sumo.. somos 5

[@sebastianacosta9165]

descubrí que pude hacerlo funcionar, corrigiendo en app-routing-module.ts; en la constante sacando el canActivate: [AuthGuard] SOLO para el primer path, el de redirectTo Quedaría así.. const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {path: 'home',component:HomeComponent, canActivate: [AuthGuard]}, {path: 'cliente',component:ClienteComponent, canActivate: [AuthGuard]}, {path: 'login',component:LoginComponent} ];

[@JuanSanchez-hf4tq]

Hola Hector, excelente video, a mi no me regresa los datos del error, me regresa en null el valor. no me regresa el error de la API

[@hdeleonnet]

En postman lo haz probado?

[@JuanSanchez-hf4tq]

@@hdeleonnet Si, en postman si funciona

[@hdeleonnet]

Entonces es tu model de angular. Revisa que este el atributo exactamente igual minúsculas mayusculas

[@javiermanzanillo]

Donde encuentro el primer video?

[@hdeleonnet]

Curso de programación de un sistema de ventas Real: kzbin.info/aero/PLWYKfSbdsjJghGaiXPs3fbuZWk2EDdNZf

[@javiermanzanillo]

@@hdeleonnet gracias

[@TitoFart]

Hola hector, a mi me sale este error y no me deja ver el diseño del login que muestras al final; ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '[(ngModel)' is not a valid attribute name.

[@hdeleonnet]

copia la linea entera porfavor para ver

[@TitoFart]

@@hdeleonnet el error de la linea entera es este: core.js:6185 ERROR Error: Uncaught (in promise): InvalidCharacterError: Failed to execute 'setAttribute' on 'Element': '[(ngModel)' is not a valid attribute name. Error: Failed to execute 'setAttribute' on 'Element': '[(ngModel)' is not a valid attribute name. at DefaultDomRenderer2.setAttribute (platform-browser.js:1151) at BaseAnimationRenderer.setAttribute (animations.js:563) at setUpAttributes (core.js:5071) at ɵɵelementStart (core.js:21022) at Module.ɵɵelement (core.js:21099) at LoginComponent_Template (login.component.html:6) at executeTemplate (core.js:11949) at renderView (core.js:11735) at renderComponent (core.js:13244) at renderChildComponents (core.js:11538) at resolvePromise (zone-evergreen.js:798) at resolvePromise (zone-evergreen.js:750) at zone-evergreen.js:860 at ZoneDelegate.invokeTask (zone-evergreen.js:399) at Object.onInvokeTask (core.js:41344) at ZoneDelegate.invokeTask (zone-evergreen.js:398) at Zone.runTask (zone-evergreen.js:167) at drainMicroTaskQueue (zone-evergreen.js:569) defaultErrorLogger @ core.js:6185

[@FranciscoRojas-qf4pf]

@@TitoFart Si aún te sirve de algo, este error ocurrió por que la route: '' que nos envía al home le aplico el authguard.

[@FernandoRuiz159]

Estimado amigo felicitaciones, muy bueno el curso... lo seguí todo, pero en la parte final no me compila...me sale el siguiente error ERROR in src/app/login/login.component.html:6:36 - error NG8002: Can't bind to 'ngMode' since it isn't a known property of 'input'. 6 ~~~~~~~~~~~~~~~~~~ src/app/login/login.component.ts:6:27 6 @Component({ templateUrl: 'login.component.html'}) ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component LoginComponent. src/app/login/login.component.html:11:40 - error NG8002: Can't bind to 'ngMode' since it isn't a known property of 'input'. 11 ~~~~~~~~~~~~~~~~~~~~~ src/app/login/login.component.ts:6:27 6 @Component({ templateUrl: 'login.component.html'}) ~~~~~~~~~~~~~~~~~~~~~~ Error occurs in the template of component LoginComponent.

[@hdeleonnet]

en app.module revisa que tengas formsmodule agregado asi import { FormsModule } from '@angular/forms'; [...] @NgModule({ imports: [ [...] FormsModule ], [...] })

[@sebastiannunez5393]

tengo un error que dice "redirectTo and canActivate cannot be used together". como lo soluciono?

[@hdeleonnet]

lo estas haciendo distinto al video creo

[@sebastiannunez5393]

@@hdeleonnet la verdad no, pero saque el redirectTo y funciono, ahora tengo un error en el video final, por que cierro sesión y cuando quiero entrar no me deja...el console log me manda la info de sesion pero no entra al home, el backend funciona por que lo probe con postman pero en el front no me deja entrar, pero no me arroja errores en consola...no se como solucionar eso

[@hdeleonnet]

que errores?

[@sebastiannunez5393]

@@hdeleonnet es que no me da errores, y reviso el localStorage y cuando inicio sesion no asigna el token al localStorage, solo manda informacion del usuario a la consola, pero no me da inicio de sesion y tampoco envia el token al localStorage, no se como solucionar ese problema

[@faangoos]

Hola Sebastian, me estaba presentando el mismo error, y buscando encontre que se puede cambiar {path: '', redirectTo: '/home', pathMatch: 'full', canActivate: [AuthGuard]}, por esta otra {path: '', redirectTo: '/login', pathMatch: 'full' }, de esta forma me funcionó. Saludos.

[@loloserbmonysodillepa5520]

de que me perdí en mi ausencia? este curso se cancelo?

[@hdeleonnet]

No

[@loloserbmonysodillepa5520]

@@hdeleonnet estoy realmente contando los minutos, bendiciones y pa'lante

[@diegopallares7110]

hola, em sale error cuando agrego las variables de email y Password 17:28 src/app/login/login.component.ts:7:12 - error TS2564: Property 'email' has no initializer and is not definitely assigned in the constructor. ayuda por favor