[MÚSICA] [MÚSICA] Hola a todos nuevamente. Aquà estamos comenzando el curso 2 módulo 3 empezando por una primera lección centrada en lo que es ruteo avanzado de los componentes en nuestra aplicación para nuestro primer video en el tema tenemos una hoja de ruta you armada. Lo primero que les recomiendo hacer es mover los componentes a una subcarpeta componentes, yo eso you lo hice para ganar tiempo, ustedes lo que tienen que hacer si siguieron exactamente la estructura que venÃamos trabajando dentro de source app, están los componentes aquà adentro cada uno en su carpeta. Lo que hicimos para reagruparlos fue crear un nuevo directorio components y dentro mover los cuatro componentes correspondientes. Esto obviamente va a romper las referencias de muchos imports, ¿si? Que tendrán que subsanar por ejemplo en este caso subiendo un nivel más you que el model queda una carpeta más lejos de lo que estaba antes, hay que subir no solo un nivel sino que subir dos niveles para llegar a la carpeta models por ejemplo. Bueno este es un primer paso Bien, ¿qué vamos a hacer? Lo primero que vamos a hacer vamos a usar un ruteo segurizado, es decir que vamos a hacer un caso de uso simple de login de usar y/o ingresar usuario y contraseña y para eso vamos a conocer lo que son los guards que son objetos que nos permiten indicar si la condición actual de la aplicación activa o no activa ese guard, ese guarda, ese guardián, ese objeto de guardia que está controlando una condición especial si se cumple o no en nuestra aplicación. Entonces luego lo que vamos a hacer en el routing de nuestra aplicación, en el ruteador vamos a hacer que ciertas rutas solo se puedan acceder si se activan ciertos guards para eso vamos a crear un guard Vamos a crear un servicio más como you hemos usado, un servicio de autenticación, que harÃa las veces de ir contra un servidor remoto, serÃa lo que harÃamos normalmente y vamos a crear un componente login y un componente protegido. Entonces para esto a correr todas estas estos comandos. [AUDIO_EN_BLANCO] Ahora hemos creado el guard, fÃjense que les hice acomodar los componentes adentro de components, ¿sÃ? Los guards adentro de guards, los models adentro de models. Ahora lo próximo que vamos a hacer es crear el servicio de autenticación que lo vamos a crear adentro de services Estamos usando la capacidad de scaffolding, de autogeneración de código de Angular, para luego personalizar nuestros bloques de código. Luego vamos a crear un componente llamado login que será la pantalla de login y luego vamos a generar un componente llamado protected (protegido) para hacer las veces de contenido sensible que vamos a proteger. Vamos a proteger solo éste componente que va a estar en una nueva ruta y el resto de la aplicación que va a permanecer como you la venÃamos trabajando en el los módulos anteriores. Bien, ahora que tenemos todo éste código nuevo vamos a empezar a costumizarlo, como es mucho código yo para acelerar la dinámica you lo tengo hecho en backup. Esto vamos a ir a login.component. [AUDIO_EN_BLANCO] Login, login.component, este es el html lo que hemos copiado. Bien, este componente fÃjense lo que estamos haciendo, agregamos un formulario, ¿si? Que tiene un primer form group y un surname, ¿si? Y luego tenemos un vinculado con la sintaxis que vimos al principio del curso, vinculado a este input control. No estamos usando un form milder sino que estamos usando la primera técnica que vimos en el módulo 1 que es más sencilla y lo mismo estamos haciendo con el password. Luego tenemos un botón de click, login, cuando nos hacen click llamamos al login con el valor de username password y y un valor logout que llamamos al logout, fÃjense que al logout lo mostramos solamente si el getUser no se da un valor distinto de no definido, undefined, ¿sÃ? Un valor verdadero. Un valor una expresión de TypeScript que evalúe como verdadera. En cambio si el getUser de authService nos da un valor que evalúe como falso, es decir que no está logeado, mostramos todo éste formulario, ¿se ve? Esta condición que tenemos aquà es excluyente con esta condición que tenemos aquà entonces en este componente si no estás logeado mostramos el formulario de login y si estás logeado mostramos el botón de logout. Bien, luego lo próximo que vamos a hacer es el código de detrás del login. [AUDIO_EN_BLANCO] Bien, fÃjense que nos dice que hay que importar AuthService. Muy bien, ahora nos dice que AuthService no tiene estos métodos, ahora los vamos a crear. ¿En el login qué hacemos? Recibimos username y password. El mensaje de error que se muestra aquà debajo de las opciones de login en el template lo ponemos en vacÃo y le pedimos hacer el login sincrónico en este caso, tal vez si fuésemos hasta un servidor en el AuthService esto serÃa asincrónico, aquà es sincrónico porque vamos a estar chequeando contra unos datos constantes que vamos a tener dentro del AuthService. Si eso nos da verdadero, perdón erróneo, mostramos login incorrecto y luego de 2.5 segundos limpiamos el mensaje de error, ¿sÃ? Bien y el return false lo tenemos porque como recuerdan estamos vinculando el login como una función correspondiente a un click entonces no queremos que se siga el link luego de haber hecho click en el elemento que tiene el evento click, y luego tenemos logout boolean que invoca al logout, bien vamos a continuar. Lo próximo que tenemos que venir a hacer es el guard, ¿sÃ? El guard. El guard está dentro de guards. Guard TypeScript guard.ts. [AUDIO_EN_BLANCO] FÃjense que también usa por inyección de dependencias el AuthService, ¿sÃ? Y el guard implementa CanActivate. CanActivate es un interfaz que nos pide implementar si o si éste método que tenemos en la lÃnea 12. Este método que tenemos en la lÃnea 12 es lo que nos hace cumplir CanActivate y básicamente nos dice si de acuerdo a este estado de la ruta, ¿sÃ? Y a al siguiente elemento que estarÃamos navegando si éste guard se activa como verdadero, ¿sÃ? En función de estos dos parámetros analizar si se activa este guard o no. Nosotros en este caso puntual no necesitamos utilizar esos objetos porque directamente you sabemos que este guard se activa si AuthService dice que está logeado el usuario sino porque no se activa. Entonces todo lo que necesitamos hacer en éste caso es usar el outservice. Vamos a continuar. Vamos a hacer el outservice, cerramos guards, vamos a services, auth.service y en el auth.service es muy sencillo. FÃjense que es un servicio inyectable como you hicimos con el ApiClient anteriormente y contestamos que si nos logeamos como usuario user y password password, bien sencillo y usamos localStorage que es un objeto en HTML5 que nos permite guardar valores en el navegador por más que nuestro componente se descargue, ¿sÃ? Es decir por más que sigamos navegando y nos vayamos del componente en donde se invocó al login, que seria el componente login.component, por más que sigamos navegando, recarguemos la página, etcétera, esto nos persiste un valor con llamado username con valor user, lo que esté dentro user que bueno obviamente siempre va a ser el String user, nos lo persiste en el navegador. ¿SÃ? Nosotros luego si en algún momento llamamos por ejemplo a getUser va a levantar el valor que acá se le hizo el set. Entonces el logout es muy sencillo hace el removeItem de username y el getUser lo busca del localStorage y el isLoggedIn usa el getUser que por detrás usa el localStorage a ver si es distinto de nulo. Bien, entonces ese es el outservice y por último tenemos que hacer el app.modules, tenemos que actualizar las rutas. [AUDIO_EN_BLANCO] Las rutas están aquà arriba y las declarations you que tenemos unos componentes nuevos. Los componentes nuevos, bueno eso fue agregado, y el AuthService y el UsuarioLogueadoGuard en providers que eso no fue agregado por el scaffolding, las declarations fueron agregadas solo por el scaffolding. Bien, entonces ahora vamos a agregar todo lo que nos tira error de import, perfecto. Esto es todo lo que tenemos que hacer. Aquà nuestra aplicación compila, perfecto, por lo que vamos a recargar la aplicación, ¿sÃ? Y veamos la ruta. La ruta que agregamos además de las tres que you tenÃamos es un ruta llamada login, ¿sÃ? En login vamos a direccionar a login.component. Entonces vamos a ingresar por URL, aquà está el login.component aquà está el botón entrar, como ven es muy sencillo y es inline asà que vamos a poner user2 password entar, obviamente esto va a tirar error, login incorrecto; y user password, entrar, y me dejó entrar. Entonces si yo voy a protected me deja entrar, en cambio si voy detrás como ven como you estoy logeado se da cuenta y me muestra directamente el salir, muestra el salir, salgo y si voy a protected no me muestra el contenido y me redirige a una ruta raÃz. Para terminar cabe aclarar que el ruteo client-side es más bien para un tema de usabilidad de usuario, la seguridad final tiene que estar de lado servidor siempre. Bueno aquà tenemos el primer video y nos vemos en el siguiente. [MÚSICA] [MÚSICA] [MÚSICA]
