‫Esta es la segunda parte de la construcción de nuestra funcionalidad de inicio de sesión.
‫Lo primero que quiero hacer
‫en este video es renderizar condicionalmente esta parte de la página.
‫Entonces, lo que significa es mostrar estos botones
‫de inicio de sesión y registro aquí
‫en caso de que el usuario no haya iniciado
‫sesión, y en caso de que el usuario haya
‫iniciado sesión bien, entonces genere algún tipo de menú de usuario aquí y también
‫un botón de cierre de sesión.
‫Ese tipo de renderizado debería ocurrir,
‫por supuesto, en el back-end, así que en una de nuestras plantillas pug.
‫Ahora, ¿cómo sabrá realmente nuestra plantilla si el
‫usuario ha iniciado sesión o no?
‫En realidad, para determinar que
‫tendremos que crear una nueva función de middleware,
‫y realmente el único objetivo de esta nueva función
‫de middleware será si el usuario está actualmente conectado o no.
‫Podría pensar que nuestro middleware de protección
‫también hace algo similar y, en realidad, es similar.
‫Pero la diferencia es
‫que uno solo funciona para varillas protegidas, así que tiene sentido, ¿verdad?
‫Pero nuestra nueva función de middleware se ejecutará
‫para todas y cada una de las solicitudes en nuestro sitio web renderizado.
‫Pongamos eso en práctica aquí mismo en
‫nuestro authController, y dado que es muy similar a
‫la ruta de protección o en realidad al middleware,
‫seguiré adelante y copiaré este aquí y luego
‫solo haré algunas modificaciones.
‫Copiemos y peguemos aquí y
‫este se llamará isLoggedIn.
‫Este middleware es realmente solo para páginas renderizadas, por lo que
‫el objetivo aquí no es proteger ninguna ruta, por lo
‫que nunca habrá un error en este middleware.
‫De hecho, escribamos rápidamente
‫eso aquí solo para las páginas renderizadas, y no habrá errores.
‫Nuestro token debe provenir de las cookies y no
‫de un encabezado de
‫autorización porque, por supuesto, para las páginas
‫renderizadas no tendremos el token en el encabezado.
‫Nuevamente, para todo nuestro sitio web renderizado, el
‫token siempre se enviará utilizando
‫la cookie y nunca el encabezado de autorización.
‫Ese es solo para la api.
‫Y en realidad no necesita ser tan complejo como esto,
‫simplemente podemos decir que ejecutemos todo
‫el código que tenemos aquí si hay un token.
‫O en realidad, si hay una cookie llamada básicamente jwt.
‫Así que eliminemos todo esto y básicamente pongámoslo aquí.
‫Quitaré este y lo pondré al final.
‫Y luego eso lo vuelve a formatear.
‫Ahora bien, este token aquí no existe,
‫es simplemente solicitar cookies. jwt.
‫Entonces esto aquí verifica el token.
‫Luego, también debemos verificar si el usuario todavía existe, por
‫lo que todo desde aquí
‫será muy similar a lo que teníamos antes, con la
‫gran excepción de que no crearemos ningún error nuevo.
‫Simplemente pasaremos al siguiente middleware, pero
‫no sucederá nada.
‫Luego también queremos verificar si
‫el usuario cambió recientemente su contraseña.
‫Y de nuevo, entonces no hay error.
‫Ahora, aquí al final, ¿qué va a
‫pasar si todo esto aquí
‫es correcto, entonces si el token está verificado, si el usuario
‫aún existe y si no cambiaron su contraseña,
‫bueno, en ese caso significa que hay es un usuario registrado.
‫Pon eso aquí.
‫Entonces hay un usuario registrado.
‫Lo que queremos hacer en
‫este caso es hacer que ese usuario sea accesible a nuestras plantillas.
‫¿Y cómo podemos hacer eso?
‫Bueno, eso es en realidad algo que no hicimos
‫antes, por lo que ahora es un buen lugar para aprender eso.
‫Podemos hacer una respuesta. locals y luego
‫coloque cualquier variable allí.
‫Y nuestras plantillas de pug tendrán acceso a ellas.
‫Entonces, si digo una respuesta. lugareños. usuario,
‫dentro de una plantilla habrá
‫una variable llamada usuario.
‫Entonces, nuevamente, todas y cada una de las plantillas
‫de pug tendrán acceso a la respuesta. locals y lo
‫que pongamos allí será una
‫variable dentro de estas plantillas.
‫Así que es un poco como pasar datos a una plantilla usando
‫la función de render.
‫Este ya no lo necesitamos, porque pondremos a
‫este usuario actual en respuesta. lugareños.
‫Y, por supuesto, después de eso, se llama al siguiente middleware.
‫Y también tenemos que hacer eso fuera de este If, por lo que
‫en caso de que no haya
‫una cookie, entonces, por
‫supuesto, se llamará al próximo middleware
‫de inmediato, porque entonces, por supuesto, no hay forma
‫de que realmente haya un usuario que haya iniciado sesión.
‫De nuevo, si no hay ninguna cookie, no hay ningún
‫usuario que haya iniciado sesión.
‫Y así, a continuación, de inmediato, y no pondremos
‫al usuario actual en respuesta. lugareños.
‫Pero si hay una cookie,
‫bueno, seguimos todos estos pasos de verificación y, al
‫final, si ninguno de ellos llamó bien
‫al siguiente middleware de la pila,
‫eso significa que hay un usuario que ha iniciado sesión.
‫Y así, ponemos a ese usuario en respuesta. locales, y así, tenemos acceso
‫a ese usuario en nuestras plantillas
‫de pug.
‫Por ejemplo, aquí mismo en el encabezado, que es en
‫realidad donde estará la navegación del usuario.
‫Así que usemos eso aquí en
‫un segundo, pero antes de hacerlo, por supuesto, también necesitamos
‫ese nuevo middleware que acabamos de crear.
‫Entonces, vengamos aquí para ver la ruta, y
‫como decía al principio, queremos
‫que este middleware se aplique a
‫cada una de las rutas que tenemos aquí.
‫Así que lo hacemos un poco como
‫lo hicimos antes con el middleware de protección.
‫Básicamente, poniéndolo aquí antes que todas las otras rutas.
‫Y entonces se colocará en la pila de middleware para todas
‫y cada una de las solicitudes que ingresen.
‫Entonces enrutador. use, authController. isLoggedIn.
‫Y también eliminemos esta protección de la página
‫de detalles del recorrido porque
‫en realidad eso no tiene ningún sentido.
‫Así que ahora estamos realmente listos para usar esto.
‫Así que vayamos aquí a nuestro encabezado y usemos un condicional.
‫Ahora recuerde
‫cómo dije antes que los condicionales en pug no eran
‫muy poderosos y muchas veces usamos Java Script.
‫Pero para lo que queremos hacer
‫ahora, en realidad son lo suficientemente buenos.
‫Entonces, todo lo que queremos hacer ahora es decir si usuario.
‫Y para eso, funcionan bien para cosas muy simples simplemente para probar
‫si una variable existe o no.
‫Entonces, si hay un usuario, queremos mostrar lo que
‫tenemos aquí, así que pongamos eso allí.
‫Así que lo
‫estoy copiando
‫aquí, comentando este código y luego aquí, decimos más.
‫Así que, al igual que en Java Script, podemos decir si, si no.
‫Entonces aquí, en realidad no quiero mis reservas,
‫sino que quiero cerrar la sesión.
‫No estoy seguro de por qué está ahí.
‫Así que es cerrar sesión y también tiene una clase especial
‫que creé para que se vea especial en CSS.
‫Entonces nav, el, y luego con el modificador, logout, y
‫también eliminemos este atributo href de allí.
‫Entonces aquí, queremos el nombre
‫del usuario, entonces user. nombre, y en realidad solo queremos el nombre.
‫Entonces, por ejemplo, si creé una
‫cuenta llamada Jonas Schmedtmann, de esta manera, solo quiero mostrar
‫la parte de Jonas aquí.
‫Entonces, dividamos el nombre usando espacios y luego
‫solo mostramos el primer elemento de
‫la matriz resultante.
‫Recuerde que aquí simplemente podemos usar Java Script de esta manera.
‫Divídalo por un espacio, y luego solo el primer elemento.
‫Entonces aquí, por supuesto, también queremos esa imagen, así
‫que esa es la imagen / usuarios, recuerde, creo que
‫al menos.
‫Entonces, aquí vamos, usuarios.
‫Y luego lo que venga de nuestra base de datos.
‫Entonces usuario. foto, y luego
‫también podemos darle un texto alternativo agradable que es
‫muy importante para la accesibilidad.
‫Hagámoslo aquí mismo.
‫Entonces, probemos esto ahora,
‫porque en realidad tengo mucha curiosidad por ver si funciona.
‫Así que, al igual que antes, déjeme
‫continuar y eliminar la cookie aquí.
‫No estoy seguro de qué está haciendo este almacenamiento local aquí ahora.
‫Eliminemos eso también, y esta cookie también.
‫Así que volvamos a iniciar sesión aquí, y ahora
‫tendré que volver a escribir esto. io prueba, uno, dos, tres, cuatro.
‫Sigamos adelante y copiemos aquí, inicie sesión y, de
‫hecho, habremos iniciado sesión correctamente.
‫Entonces, obtenemos nuestra galleta ahora, aquí vamos.
‫Pero, por supuesto, nuestra foto de usuario y nuestro nombre no
‫se mostraron inmediatamente aquí, y eso se debe,
‫por supuesto, a que esto solo puede suceder
‫después de una recarga,
‫porque es Express quien renderiza estas
‫páginas, por lo que es necesario volver a cargarlas.
‫Así que implementemos eso en un
‫segundo, pero por ahora veamos si realmente estamos conectados.
‫Así que vayamos a todos los recorridos aquí, y
‫ahora obtenemos este error aquí.
‫Intenta recargar aquí.
‫Bueno, dice que no puede encontrarlo en el servidor.
‫¿Qué pasa si recargamos aquí?
‫Bueno, este funciona, y ves que
‫en realidad nuestro menú de usuario ya está aquí.
‫Entonces obtenemos nuestro botón de cierre de
‫sesión y una imagen, y por supuesto mi nombre.
‫Excelente.
‫Ahora intentemos básicamente
‫cerrar la sesión eliminando esta cookie.
‫Y en el
‫siguiente video implementaremos esta funcionalidad exacta.
‫Y si recargamos ahora, está de vuelta, ¡genial!
‫Entonces, la función de middleware que acabamos de crear
‫antes está realmente haciendo su trabajo.
‫Iniciemos sesión como
‫otra persona aquí, así que digamos Laura, de acuerdo.
‫Entonces Laura, y luego con la misma
‫contraseña prueba uno, dos, tres, cuatro,
‫inicia sesión, está bien, vuelve a cargar y listo.
‫Así que esto está funcionando muy bien.
‫Solo estoy preocupado por este error,
‫por lo que antes de hacer cualquier
‫otra cosa, debemos solucionarlo.
‫Y dado que este error solo
‫comenzó una vez que
‫comenzamos a usar este nuevo middleware, asegurémonos de ver
‫si tiene algo que ver con eso.
‫Entonces, si eliminamos
‫este middleware, veamos si vuelve a funcionar.
‫Y sí, lo hace ahora.
‫Eso es un poco extraño.
‫Echemos un vistazo si
‫podemos encontrar algún error en esta función de middleware.
‫Lo que veo aquí de inmediato
‫es que siempre regresamos cada vez que llamamos a continuación, pero aquí en
‫la siguiente no lo hacemos.
‫Eso significa que en caso de que
‫ingresemos a este bloque aquí, se llamará al próximo middleware,
‫pero luego se llamará
‫al siguiente middleware después de eso.
‫Así que probablemente también tengamos que devolver este aquí.
‫Pero nos aseguramos de que el siguiente solo se llame una vez.
‫Así que intentemos eso, vuelva a poner este aquí,
‫déjelo guardar, de hecho, desplácese hacia abajo aquí.
‫Sí, eso funciona ahora.
‫Así que ahora
‫también tenemos nuestro usuario que ha iniciado sesión y, por supuesto, si
‫eliminamos la cookie básicamente para cerrar la sesión del usuario, recargar esto ahora,
‫entonces volvemos a la normalidad.
‫A continuación, lo que queríamos arreglar aquí es recibir una alerta
‫aquí, y también volver a
‫cargar la página después de un tiempo.
‫En realidad, no se está recargando, sino que se envía de
‫vuelta a la página de inicio.
‫Así que ahora mismo esto se ha ido, y
‫como dije antes, solo vemos
‫ese menú de usuario cuando recargamos la página.
‫Entonces eso es lo que haremos ahora automáticamente
‫en nuestro código Java Script aquí.
‫Así que, en primer lugar, eliminemos estos datos aquí.
‫Registrar datos confidenciales en la consola nunca es una buena
‫idea, y ahora hagamos lo que
‫acabo de decir antes.
‫Así que aquí hacemos una solicitud y, por
‫supuesto, también le mostraré cómo podemos enviar datos directamente desde
‫un formulario htl a nuestra aplicación Note.
‫Hay dos maneras.
‫Una forma es enviar
‫datos mediante una solicitud http como hicimos aquí.
‫Y otro es simplemente usar directamente un formulario html.
‫Y ese también es muy importante, por lo que un
‫poco más adelante en
‫la sección les mostraré cómo hacerlo también.
‫De todos modos, ahora mostremos esa alerta y recarguemos la página.
‫Solo hagamos eso en caso de que estemos realmente seguros de
‫que nuestra llamada a la API fue exitosa.
‫Digamos respuesta. datos, por lo que los datos son
‫en realidad los
‫datos que enviamos como respuesta de
‫nuestro día, y desde allí podemos leer. estado y compruebe si es
‫igual al éxito.
‫Por lo tanto, recuerde cómo siempre
‫configuramos el estado en éxito, y ahora podemos usarlo
‫para realizar esta verificación.
‫Entonces, usemos una alerta simple de Java
‫Script, una alerta como esta y digamos que inició sesión correctamente.
‫Deshagámonos de esto, y luego, después de un segundo
‫y medio, carguemos la página principal.
‫Básicamente, la página de inicio.
‫Entonces, ventana. setTimeout, luego aquí
‫la función de devolución de llamada, y
‫para cargar otra página decimos ubicación. asignar, y luego simplemente vamos a la página
‫de inicio como esta.
‫Y queremos hacerlo después de 1500 milisegundos,
‫entonces, un segundo y medio.
‫Entonces, en caso de
‫que no lo logremos, en realidad
‫no queremos registrar esto, sino que queremos alertarlo.
‫Así que alerta, y nuevamente,
‫estos datos aquí son en realidad nuestra respuesta de datos.
‫Entonces, a partir de aquí, leamos la propiedad del mensaje.
‫Eso debería hacer el trabajo, recarguemos aquí.
‫Está bien, esa no es la persona adecuada.
‫Por lo tanto, admin en natours. io, prueba uno
‫dos tres cuatro cinco,
‫para ver el error primero.
‫Y entonces ve, correo electrónico o
‫contraseña incorrectos, y por supuesto eso se debe a
‫que nuestra contraseña era incorrecta, así que eliminemos eso,
‫inicie sesión e inicie sesión con éxito.
‫Ahora veamos qué pasa.
‫Y en realidad no se recarga
‫automáticamente, porque antes de que eso suceda,
‫debemos cerrar esta ventana.
‫Entonces, una vez que cerramos, debería realizar la recarga de inmediato.
‫Y ahí vamos.
‫Ahora estamos en la página
‫de inicio, y nuevamente con nuestro menú de usuario correcto representado aquí, perfecto.
‫Así que esta parte también está completa y ahora, como
‫último paso, quiero mejorar estas alertas
‫que recibe el usuario.
‫En lugar de mostrar estas alertas de Java Script integradas.
‫Además, vamos a hacer ese paquete de Java Script que
‫ya mencioné un par de veces, pero lo
‫dejaremos todo para el próximo video
‫porque no quiero sobrecargar demasiado cada uno de estos.