1 00:00:01,750 --> 00:00:05,683 ‫Esta es la segunda parte de la construcción de nuestra funcionalidad de inicio de sesión. 2 00:00:07,280 --> 00:00:09,600 ‫Lo primero que quiero hacer 3 00:00:09,600 --> 00:00:14,160 ‫en este video es renderizar condicionalmente esta parte de la página. 4 00:00:14,160 --> 00:00:16,390 ‫Entonces, lo que significa es mostrar estos botones 5 00:00:16,390 --> 00:00:18,570 ‫de inicio de sesión y registro aquí 6 00:00:18,570 --> 00:00:21,010 ‫en caso de que el usuario no haya iniciado 7 00:00:21,010 --> 00:00:23,470 ‫sesión, y en caso de que el usuario haya 8 00:00:23,470 --> 00:00:27,450 ‫iniciado sesión bien, entonces genere algún tipo de menú de usuario aquí y también 9 00:00:27,450 --> 00:00:29,543 ‫un botón de cierre de sesión. 10 00:00:30,720 --> 00:00:32,650 ‫Ese tipo de renderizado debería ocurrir, 11 00:00:32,650 --> 00:00:36,720 ‫por supuesto, en el back-end, así que en una de nuestras plantillas pug. 12 00:00:36,720 --> 00:00:39,420 ‫Ahora, ¿cómo sabrá realmente nuestra plantilla si el 13 00:00:39,420 --> 00:00:41,603 ‫usuario ha iniciado sesión o no? 14 00:00:42,510 --> 00:00:44,600 ‫En realidad, para determinar que 15 00:00:44,600 --> 00:00:47,550 ‫tendremos que crear una nueva función de middleware, 16 00:00:47,550 --> 00:00:50,970 ‫y realmente el único objetivo de esta nueva función 17 00:00:50,970 --> 00:00:54,813 ‫de middleware será si el usuario está actualmente conectado o no. 18 00:00:55,720 --> 00:00:58,790 ‫Podría pensar que nuestro middleware de protección 19 00:00:58,790 --> 00:01:02,080 ‫también hace algo similar y, en realidad, es similar. 20 00:01:02,080 --> 00:01:03,590 ‫Pero la diferencia es 21 00:01:03,590 --> 00:01:07,720 ‫que uno solo funciona para varillas protegidas, así que tiene sentido, ¿verdad? 22 00:01:07,720 --> 00:01:10,370 ‫Pero nuestra nueva función de middleware se ejecutará 23 00:01:10,370 --> 00:01:14,003 ‫para todas y cada una de las solicitudes en nuestro sitio web renderizado. 24 00:01:17,060 --> 00:01:19,710 ‫Pongamos eso en práctica aquí mismo en 25 00:01:19,710 --> 00:01:23,170 ‫nuestro authController, y dado que es muy similar a 26 00:01:23,170 --> 00:01:26,430 ‫la ruta de protección o en realidad al middleware, 27 00:01:26,430 --> 00:01:29,450 ‫seguiré adelante y copiaré este aquí y luego 28 00:01:29,450 --> 00:01:31,483 ‫solo haré algunas modificaciones. 29 00:01:34,250 --> 00:01:37,240 ‫Copiemos y peguemos aquí y 30 00:01:37,240 --> 00:01:39,860 ‫este se llamará isLoggedIn. 31 00:01:43,210 --> 00:01:46,900 ‫Este middleware es realmente solo para páginas renderizadas, por lo que 32 00:01:46,900 --> 00:01:50,510 ‫el objetivo aquí no es proteger ninguna ruta, por lo 33 00:01:50,510 --> 00:01:53,593 ‫que nunca habrá un error en este middleware. 34 00:01:55,200 --> 00:01:57,370 ‫De hecho, escribamos rápidamente 35 00:01:58,550 --> 00:02:03,550 ‫eso aquí solo para las páginas renderizadas, y no habrá errores. 36 00:02:08,360 --> 00:02:11,560 ‫Nuestro token debe provenir de las cookies y no 37 00:02:11,560 --> 00:02:13,640 ‫de un encabezado de 38 00:02:13,640 --> 00:02:16,230 ‫autorización porque, por supuesto, para las páginas 39 00:02:16,230 --> 00:02:19,133 ‫renderizadas no tendremos el token en el encabezado. 40 00:02:20,050 --> 00:02:23,220 ‫Nuevamente, para todo nuestro sitio web renderizado, el 41 00:02:23,220 --> 00:02:25,800 ‫token siempre se enviará utilizando 42 00:02:25,800 --> 00:02:29,000 ‫la cookie y nunca el encabezado de autorización. 43 00:02:29,000 --> 00:02:32,143 ‫Ese es solo para la api. 44 00:02:33,070 --> 00:02:36,320 ‫Y en realidad no necesita ser tan complejo como esto, 45 00:02:36,320 --> 00:02:38,790 ‫simplemente podemos decir que ejecutemos todo 46 00:02:38,790 --> 00:02:42,030 ‫el código que tenemos aquí si hay un token. 47 00:02:42,030 --> 00:02:46,083 ‫O en realidad, si hay una cookie llamada básicamente jwt. 48 00:02:49,680 --> 00:02:54,460 ‫Así que eliminemos todo esto y básicamente pongámoslo aquí. 49 00:02:54,460 --> 00:02:57,303 ‫Quitaré este y lo pondré al final. 50 00:03:02,780 --> 00:03:04,373 ‫Y luego eso lo vuelve a formatear. 51 00:03:08,630 --> 00:03:10,900 ‫Ahora bien, este token aquí no existe, 52 00:03:10,900 --> 00:03:13,907 ‫es simplemente solicitar cookies. jwt. 53 00:03:20,000 --> 00:03:22,743 ‫Entonces esto aquí verifica el token. 54 00:03:28,060 --> 00:03:31,320 ‫Luego, también debemos verificar si el usuario todavía existe, por 55 00:03:31,320 --> 00:03:33,290 ‫lo que todo desde aquí 56 00:03:33,290 --> 00:03:36,513 ‫será muy similar a lo que teníamos antes, con la 57 00:03:36,513 --> 00:03:39,533 ‫gran excepción de que no crearemos ningún error nuevo. 58 00:03:41,500 --> 00:03:43,780 ‫Simplemente pasaremos al siguiente middleware, pero 59 00:03:43,780 --> 00:03:45,123 ‫no sucederá nada. 60 00:03:47,540 --> 00:03:49,530 ‫Luego también queremos verificar si 61 00:03:49,530 --> 00:03:51,910 ‫el usuario cambió recientemente su contraseña. 62 00:03:51,910 --> 00:03:55,113 ‫Y de nuevo, entonces no hay error. 63 00:03:56,210 --> 00:03:58,410 ‫Ahora, aquí al final, ¿qué va a 64 00:03:58,410 --> 00:04:00,420 ‫pasar si todo esto aquí 65 00:04:00,420 --> 00:04:03,920 ‫es correcto, entonces si el token está verificado, si el usuario 66 00:04:03,920 --> 00:04:06,400 ‫aún existe y si no cambiaron su contraseña, 67 00:04:06,400 --> 00:04:09,673 ‫bueno, en ese caso significa que hay es un usuario registrado. 68 00:04:11,800 --> 00:04:12,713 ‫Pon eso aquí. 69 00:04:17,810 --> 00:04:20,440 ‫Entonces hay un usuario registrado. 70 00:04:20,440 --> 00:04:22,130 ‫Lo que queremos hacer en 71 00:04:22,130 --> 00:04:25,320 ‫este caso es hacer que ese usuario sea accesible a nuestras plantillas. 72 00:04:25,320 --> 00:04:26,950 ‫¿Y cómo podemos hacer eso? 73 00:04:26,950 --> 00:04:29,960 ‫Bueno, eso es en realidad algo que no hicimos 74 00:04:29,960 --> 00:04:33,283 ‫antes, por lo que ahora es un buen lugar para aprender eso. 75 00:04:34,970 --> 00:04:38,340 ‫Podemos hacer una respuesta. locals y luego 76 00:04:38,340 --> 00:04:40,500 ‫coloque cualquier variable allí. 77 00:04:40,500 --> 00:04:43,650 ‫Y nuestras plantillas de pug tendrán acceso a ellas. 78 00:04:43,650 --> 00:04:46,920 ‫Entonces, si digo una respuesta. lugareños. usuario, 79 00:04:46,920 --> 00:04:49,000 ‫dentro de una plantilla habrá 80 00:04:49,000 --> 00:04:50,963 ‫una variable llamada usuario. 81 00:04:52,320 --> 00:04:55,060 ‫Entonces, nuevamente, todas y cada una de las plantillas 82 00:04:55,060 --> 00:04:59,410 ‫de pug tendrán acceso a la respuesta. locals y lo 83 00:04:59,410 --> 00:05:02,060 ‫que pongamos allí será una 84 00:05:02,060 --> 00:05:04,300 ‫variable dentro de estas plantillas. 85 00:05:04,300 --> 00:05:07,350 ‫Así que es un poco como pasar datos a una plantilla usando 86 00:05:07,350 --> 00:05:08,713 ‫la función de render. 87 00:05:11,870 --> 00:05:14,400 ‫Este ya no lo necesitamos, porque pondremos a 88 00:05:14,400 --> 00:05:17,593 ‫este usuario actual en respuesta. lugareños. 89 00:05:20,710 --> 00:05:24,450 ‫Y, por supuesto, después de eso, se llama al siguiente middleware. 90 00:05:24,450 --> 00:05:27,833 ‫Y también tenemos que hacer eso fuera de este If, por lo que 91 00:05:30,930 --> 00:05:32,660 ‫en caso de que no haya 92 00:05:32,660 --> 00:05:34,180 ‫una cookie, entonces, por 93 00:05:34,180 --> 00:05:35,900 ‫supuesto, se llamará al próximo middleware 94 00:05:35,900 --> 00:05:38,380 ‫de inmediato, porque entonces, por supuesto, no hay forma 95 00:05:38,380 --> 00:05:41,010 ‫de que realmente haya un usuario que haya iniciado sesión. 96 00:05:41,010 --> 00:05:44,260 ‫De nuevo, si no hay ninguna cookie, no hay ningún 97 00:05:44,260 --> 00:05:46,170 ‫usuario que haya iniciado sesión. 98 00:05:46,170 --> 00:05:49,050 ‫Y así, a continuación, de inmediato, y no pondremos 99 00:05:49,050 --> 00:05:52,283 ‫al usuario actual en respuesta. lugareños. 100 00:05:53,410 --> 00:05:55,240 ‫Pero si hay una cookie, 101 00:05:55,240 --> 00:05:58,180 ‫bueno, seguimos todos estos pasos de verificación y, al 102 00:05:58,180 --> 00:06:00,400 ‫final, si ninguno de ellos llamó bien 103 00:06:00,400 --> 00:06:02,530 ‫al siguiente middleware de la pila, 104 00:06:02,530 --> 00:06:05,620 ‫eso significa que hay un usuario que ha iniciado sesión. 105 00:06:05,620 --> 00:06:09,510 ‫Y así, ponemos a ese usuario en respuesta. locales, y así, tenemos acceso 106 00:06:09,510 --> 00:06:12,190 ‫a ese usuario en nuestras plantillas 107 00:06:12,190 --> 00:06:13,573 ‫de pug. 108 00:06:15,090 --> 00:06:19,230 ‫Por ejemplo, aquí mismo en el encabezado, que es en 109 00:06:19,230 --> 00:06:22,493 ‫realidad donde estará la navegación del usuario. 110 00:06:23,810 --> 00:06:25,990 ‫Así que usemos eso aquí en 111 00:06:25,990 --> 00:06:29,380 ‫un segundo, pero antes de hacerlo, por supuesto, también necesitamos 112 00:06:29,380 --> 00:06:31,733 ‫ese nuevo middleware que acabamos de crear. 113 00:06:32,950 --> 00:06:35,563 ‫Entonces, vengamos aquí para ver la ruta, y 114 00:06:37,320 --> 00:06:39,210 ‫como decía al principio, queremos 115 00:06:39,210 --> 00:06:41,240 ‫que este middleware se aplique a 116 00:06:41,240 --> 00:06:43,710 ‫cada una de las rutas que tenemos aquí. 117 00:06:43,710 --> 00:06:45,840 ‫Así que lo hacemos un poco como 118 00:06:45,840 --> 00:06:48,210 ‫lo hicimos antes con el middleware de protección. 119 00:06:48,210 --> 00:06:51,330 ‫Básicamente, poniéndolo aquí antes que todas las otras rutas. 120 00:06:51,330 --> 00:06:54,020 ‫Y entonces se colocará en la pila de middleware para todas 121 00:06:54,020 --> 00:06:56,403 ‫y cada una de las solicitudes que ingresen. 122 00:06:57,820 --> 00:07:02,820 ‫Entonces enrutador. use, authController. isLoggedIn. 123 00:07:07,250 --> 00:07:10,140 ‫Y también eliminemos esta protección de la página 124 00:07:10,140 --> 00:07:12,180 ‫de detalles del recorrido porque 125 00:07:12,180 --> 00:07:14,803 ‫en realidad eso no tiene ningún sentido. 126 00:07:15,690 --> 00:07:18,433 ‫Así que ahora estamos realmente listos para usar esto. 127 00:07:19,290 --> 00:07:23,103 ‫Así que vayamos aquí a nuestro encabezado y usemos un condicional. 128 00:07:24,420 --> 00:07:25,500 ‫Ahora recuerde 129 00:07:25,500 --> 00:07:29,260 ‫cómo dije antes que los condicionales en pug no eran 130 00:07:29,260 --> 00:07:32,570 ‫muy poderosos y muchas veces usamos Java Script. 131 00:07:32,570 --> 00:07:34,340 ‫Pero para lo que queremos hacer 132 00:07:34,340 --> 00:07:36,270 ‫ahora, en realidad son lo suficientemente buenos. 133 00:07:36,270 --> 00:07:40,793 ‫Entonces, todo lo que queremos hacer ahora es decir si usuario. 134 00:07:42,020 --> 00:07:46,980 ‫Y para eso, funcionan bien para cosas muy simples simplemente para probar 135 00:07:46,980 --> 00:07:50,063 ‫si una variable existe o no. 136 00:07:52,273 --> 00:07:56,380 ‫Entonces, si hay un usuario, queremos mostrar lo que 137 00:07:56,380 --> 00:07:59,853 ‫tenemos aquí, así que pongamos eso allí. 138 00:08:00,940 --> 00:08:02,433 ‫Así que lo 139 00:08:05,000 --> 00:08:06,410 ‫estoy copiando 140 00:08:09,150 --> 00:08:13,560 ‫aquí, comentando este código y luego aquí, decimos más. 141 00:08:13,560 --> 00:08:17,670 ‫Así que, al igual que en Java Script, podemos decir si, si no. 142 00:08:17,670 --> 00:08:20,300 ‫Entonces aquí, en realidad no quiero mis reservas, 143 00:08:20,300 --> 00:08:22,580 ‫sino que quiero cerrar la sesión. 144 00:08:22,580 --> 00:08:24,173 ‫No estoy seguro de por qué está ahí. 145 00:08:25,490 --> 00:08:29,000 ‫Así que es cerrar sesión y también tiene una clase especial 146 00:08:29,980 --> 00:08:33,313 ‫que creé para que se vea especial en CSS. 147 00:08:34,180 --> 00:08:39,180 ‫Entonces nav, el, y luego con el modificador, logout, y 148 00:08:40,860 --> 00:08:44,713 ‫también eliminemos este atributo href de allí. 149 00:08:47,270 --> 00:08:49,743 ‫Entonces aquí, queremos el nombre 150 00:08:53,010 --> 00:08:57,040 ‫del usuario, entonces user. nombre, y en realidad solo queremos el nombre. 151 00:08:57,040 --> 00:08:59,990 ‫Entonces, por ejemplo, si creé una 152 00:08:59,990 --> 00:09:04,650 ‫cuenta llamada Jonas Schmedtmann, de esta manera, solo quiero mostrar 153 00:09:04,650 --> 00:09:07,293 ‫la parte de Jonas aquí. 154 00:09:08,530 --> 00:09:11,810 ‫Entonces, dividamos el nombre usando espacios y luego 155 00:09:11,810 --> 00:09:14,030 ‫solo mostramos el primer elemento de 156 00:09:14,030 --> 00:09:15,623 ‫la matriz resultante. 157 00:09:18,330 --> 00:09:21,280 ‫Recuerde que aquí simplemente podemos usar Java Script de esta manera. 158 00:09:22,610 --> 00:09:26,513 ‫Divídalo por un espacio, y luego solo el primer elemento. 159 00:09:28,330 --> 00:09:31,593 ‫Entonces aquí, por supuesto, también queremos esa imagen, así 160 00:09:33,430 --> 00:09:37,300 ‫que esa es la imagen / usuarios, recuerde, creo que 161 00:09:37,300 --> 00:09:38,313 ‫al menos. 162 00:09:41,930 --> 00:09:43,377 ‫Entonces, aquí vamos, usuarios. 163 00:09:46,660 --> 00:09:49,683 ‫Y luego lo que venga de nuestra base de datos. 164 00:09:53,220 --> 00:09:56,747 ‫Entonces usuario. foto, y luego 165 00:09:56,747 --> 00:10:00,880 ‫también podemos darle un texto alternativo agradable que es 166 00:10:00,880 --> 00:10:03,737 ‫muy importante para la accesibilidad. 167 00:10:03,737 --> 00:10:05,723 ‫Hagámoslo aquí mismo. 168 00:10:12,070 --> 00:10:14,040 ‫Entonces, probemos esto ahora, 169 00:10:14,040 --> 00:10:18,113 ‫porque en realidad tengo mucha curiosidad por ver si funciona. 170 00:10:19,780 --> 00:10:22,180 ‫Así que, al igual que antes, déjeme 171 00:10:22,180 --> 00:10:24,393 ‫continuar y eliminar la cookie aquí. 172 00:10:25,610 --> 00:10:28,900 ‫No estoy seguro de qué está haciendo este almacenamiento local aquí ahora. 173 00:10:28,900 --> 00:10:33,163 ‫Eliminemos eso también, y esta cookie también. 174 00:10:35,030 --> 00:10:38,460 ‫Así que volvamos a iniciar sesión aquí, y ahora 175 00:10:38,460 --> 00:10:40,903 ‫tendré que volver a escribir esto. io prueba, uno, dos, tres, cuatro. 176 00:10:44,217 --> 00:10:48,260 ‫Sigamos adelante y copiemos aquí, inicie sesión y, de 177 00:10:48,260 --> 00:10:50,940 ‫hecho, habremos iniciado sesión correctamente. 178 00:10:50,940 --> 00:10:55,420 ‫Entonces, obtenemos nuestra galleta ahora, aquí vamos. 179 00:10:55,420 --> 00:10:59,040 ‫Pero, por supuesto, nuestra foto de usuario y nuestro nombre no 180 00:10:59,040 --> 00:11:01,820 ‫se mostraron inmediatamente aquí, y eso se debe, 181 00:11:01,820 --> 00:11:04,470 ‫por supuesto, a que esto solo puede suceder 182 00:11:04,470 --> 00:11:06,210 ‫después de una recarga, 183 00:11:06,210 --> 00:11:08,450 ‫porque es Express quien renderiza estas 184 00:11:08,450 --> 00:11:11,470 ‫páginas, por lo que es necesario volver a cargarlas. 185 00:11:11,470 --> 00:11:13,443 ‫Así que implementemos eso en un 186 00:11:15,120 --> 00:11:17,460 ‫segundo, pero por ahora veamos si realmente estamos conectados. 187 00:11:17,460 --> 00:11:22,160 ‫Así que vayamos a todos los recorridos aquí, y 188 00:11:22,160 --> 00:11:25,400 ‫ahora obtenemos este error aquí. 189 00:11:25,400 --> 00:11:28,180 ‫Intenta recargar aquí. 190 00:11:28,180 --> 00:11:29,373 ‫Bueno, dice que no puede encontrarlo en el servidor. 191 00:11:30,490 --> 00:11:33,630 ‫¿Qué pasa si recargamos aquí? 192 00:11:33,630 --> 00:11:35,633 ‫Bueno, este funciona, y ves que 193 00:11:37,400 --> 00:11:39,936 ‫en realidad nuestro menú de usuario ya está aquí. 194 00:11:39,936 --> 00:11:42,910 ‫Entonces obtenemos nuestro botón de cierre de 195 00:11:42,910 --> 00:11:46,220 ‫sesión y una imagen, y por supuesto mi nombre. 196 00:11:46,220 --> 00:11:48,490 ‫Excelente. 197 00:11:48,490 --> 00:11:49,870 ‫Ahora intentemos básicamente 198 00:11:49,870 --> 00:11:51,890 ‫cerrar la sesión eliminando esta cookie. 199 00:11:51,890 --> 00:11:53,670 ‫Y en el 200 00:11:53,670 --> 00:11:55,900 ‫siguiente video implementaremos esta funcionalidad exacta. 201 00:11:55,900 --> 00:11:57,433 ‫Y si recargamos ahora, está de vuelta, ¡genial! 202 00:11:59,530 --> 00:12:03,160 ‫Entonces, la función de middleware que acabamos de crear 203 00:12:03,160 --> 00:12:05,840 ‫antes está realmente haciendo su trabajo. 204 00:12:05,840 --> 00:12:07,663 ‫Iniciemos sesión como 205 00:12:08,500 --> 00:12:12,440 ‫otra persona aquí, así que digamos Laura, de acuerdo. 206 00:12:12,440 --> 00:12:15,713 ‫Entonces Laura, y luego con la misma 207 00:12:17,870 --> 00:12:20,930 ‫contraseña prueba uno, dos, tres, cuatro, 208 00:12:20,930 --> 00:12:25,190 ‫inicia sesión, está bien, vuelve a cargar y listo. 209 00:12:25,190 --> 00:12:29,690 ‫Así que esto está funcionando muy bien. 210 00:12:29,690 --> 00:12:31,680 ‫Solo estoy preocupado por este error, 211 00:12:31,680 --> 00:12:33,900 ‫por lo que antes de hacer cualquier 212 00:12:33,900 --> 00:12:35,580 ‫otra cosa, debemos solucionarlo. 213 00:12:35,580 --> 00:12:37,890 ‫Y dado que este error solo 214 00:12:37,890 --> 00:12:40,000 ‫comenzó una vez que 215 00:12:40,000 --> 00:12:43,060 ‫comenzamos a usar este nuevo middleware, asegurémonos de ver 216 00:12:43,060 --> 00:12:45,520 ‫si tiene algo que ver con eso. 217 00:12:45,520 --> 00:12:47,020 ‫Entonces, si eliminamos 218 00:12:48,110 --> 00:12:50,530 ‫este middleware, veamos si vuelve a funcionar. 219 00:12:50,530 --> 00:12:52,853 ‫Y sí, lo hace ahora. 220 00:12:54,860 --> 00:12:56,570 ‫Eso es un poco extraño. 221 00:12:56,570 --> 00:12:58,253 ‫Echemos un vistazo si 222 00:12:59,218 --> 00:13:02,790 ‫podemos encontrar algún error en esta función de middleware. 223 00:13:02,790 --> 00:13:05,023 ‫Lo que veo aquí de inmediato 224 00:13:09,560 --> 00:13:13,890 ‫es que siempre regresamos cada vez que llamamos a continuación, pero aquí en 225 00:13:13,890 --> 00:13:15,760 ‫la siguiente no lo hacemos. 226 00:13:15,760 --> 00:13:18,360 ‫Eso significa que en caso de que 227 00:13:18,360 --> 00:13:22,540 ‫ingresemos a este bloque aquí, se llamará al próximo middleware, 228 00:13:22,540 --> 00:13:24,490 ‫pero luego se llamará 229 00:13:24,490 --> 00:13:27,060 ‫al siguiente middleware después de eso. 230 00:13:27,060 --> 00:13:28,633 ‫Así que probablemente también tengamos que devolver este aquí. 231 00:13:30,630 --> 00:13:34,823 ‫Pero nos aseguramos de que el siguiente solo se llame una vez. 232 00:13:36,040 --> 00:13:40,223 ‫Así que intentemos eso, vuelva a poner este aquí, 233 00:13:41,670 --> 00:13:45,430 ‫déjelo guardar, de hecho, desplácese hacia abajo aquí. 234 00:13:45,430 --> 00:13:48,713 ‫Sí, eso funciona ahora. 235 00:13:53,460 --> 00:13:54,510 ‫Así que ahora 236 00:13:55,840 --> 00:13:59,490 ‫también tenemos nuestro usuario que ha iniciado sesión y, por supuesto, si 237 00:13:59,490 --> 00:14:03,610 ‫eliminamos la cookie básicamente para cerrar la sesión del usuario, recargar esto ahora, 238 00:14:03,610 --> 00:14:05,330 ‫entonces volvemos a la normalidad. 239 00:14:05,330 --> 00:14:09,283 ‫A continuación, lo que queríamos arreglar aquí es recibir una alerta 240 00:14:12,366 --> 00:14:14,430 ‫aquí, y también volver a 241 00:14:14,430 --> 00:14:16,930 ‫cargar la página después de un tiempo. 242 00:14:16,930 --> 00:14:20,133 ‫En realidad, no se está recargando, sino que se envía de 243 00:14:21,620 --> 00:14:23,400 ‫vuelta a la página de inicio. 244 00:14:23,400 --> 00:14:26,343 ‫Así que ahora mismo esto se ha ido, y 245 00:14:28,570 --> 00:14:30,410 ‫como dije antes, solo vemos 246 00:14:30,410 --> 00:14:33,330 ‫ese menú de usuario cuando recargamos la página. 247 00:14:33,330 --> 00:14:36,230 ‫Entonces eso es lo que haremos ahora automáticamente 248 00:14:36,230 --> 00:14:38,800 ‫en nuestro código Java Script aquí. 249 00:14:38,800 --> 00:14:40,293 ‫Así que, en primer lugar, eliminemos estos datos aquí. 250 00:14:41,882 --> 00:14:45,280 ‫Registrar datos confidenciales en la consola nunca es una buena 251 00:14:46,350 --> 00:14:48,340 ‫idea, y ahora hagamos lo que 252 00:14:48,340 --> 00:14:50,140 ‫acabo de decir antes. 253 00:14:50,140 --> 00:14:53,403 ‫Así que aquí hacemos una solicitud y, por 254 00:14:54,250 --> 00:14:58,220 ‫supuesto, también le mostraré cómo podemos enviar datos directamente desde 255 00:14:58,220 --> 00:15:01,220 ‫un formulario htl a nuestra aplicación Note. 256 00:15:01,220 --> 00:15:04,503 ‫Hay dos maneras. 257 00:15:06,430 --> 00:15:07,410 ‫Una forma es enviar 258 00:15:07,410 --> 00:15:09,260 ‫datos mediante una solicitud http como hicimos aquí. 259 00:15:09,260 --> 00:15:11,750 ‫Y otro es simplemente usar directamente un formulario html. 260 00:15:11,750 --> 00:15:15,940 ‫Y ese también es muy importante, por lo que un 261 00:15:15,940 --> 00:15:17,960 ‫poco más adelante en 262 00:15:17,960 --> 00:15:21,130 ‫la sección les mostraré cómo hacerlo también. 263 00:15:21,130 --> 00:15:23,090 ‫De todos modos, ahora mostremos esa alerta y recarguemos la página. 264 00:15:23,090 --> 00:15:27,200 ‫Solo hagamos eso en caso de que estemos realmente seguros de 265 00:15:27,200 --> 00:15:30,320 ‫que nuestra llamada a la API fue exitosa. 266 00:15:30,320 --> 00:15:32,870 ‫Digamos respuesta. datos, por lo que los datos son 267 00:15:32,870 --> 00:15:36,290 ‫en realidad los 268 00:15:36,290 --> 00:15:38,600 ‫datos que enviamos como respuesta de 269 00:15:38,600 --> 00:15:41,220 ‫nuestro día, y desde allí podemos leer. estado y compruebe si es 270 00:15:41,220 --> 00:15:44,693 ‫igual al éxito. 271 00:15:44,693 --> 00:15:47,483 ‫Por lo tanto, recuerde cómo siempre 272 00:15:50,439 --> 00:15:53,920 ‫configuramos el estado en éxito, y ahora podemos usarlo 273 00:15:53,920 --> 00:15:55,900 ‫para realizar esta verificación. 274 00:15:55,900 --> 00:15:58,093 ‫Entonces, usemos una alerta simple de Java 275 00:15:59,038 --> 00:16:02,147 ‫Script, una alerta como esta y digamos que inició sesión correctamente. 276 00:16:02,147 --> 00:16:07,147 ‫Deshagámonos de esto, y luego, después de un segundo 277 00:16:14,120 --> 00:16:17,950 ‫y medio, carguemos la página principal. 278 00:16:17,950 --> 00:16:21,330 ‫Básicamente, la página de inicio. 279 00:16:21,330 --> 00:16:22,730 ‫Entonces, ventana. setTimeout, luego aquí 280 00:16:23,640 --> 00:16:28,640 ‫la función de devolución de llamada, y 281 00:16:31,100 --> 00:16:33,400 ‫para cargar otra página decimos ubicación. asignar, y luego simplemente vamos a la página 282 00:16:33,400 --> 00:16:36,633 ‫de inicio como esta. 283 00:16:37,700 --> 00:16:41,563 ‫Y queremos hacerlo después de 1500 milisegundos, 284 00:16:43,690 --> 00:16:47,120 ‫entonces, un segundo y medio. 285 00:16:47,120 --> 00:16:49,023 ‫Entonces, en caso de 286 00:16:49,990 --> 00:16:52,780 ‫que no lo logremos, en realidad 287 00:16:52,780 --> 00:16:55,950 ‫no queremos registrar esto, sino que queremos alertarlo. 288 00:16:55,950 --> 00:16:57,553 ‫Así que alerta, y nuevamente, 289 00:16:59,600 --> 00:17:02,350 ‫estos datos aquí son en realidad nuestra respuesta de datos. 290 00:17:02,350 --> 00:17:04,533 ‫Entonces, a partir de aquí, leamos la propiedad del mensaje. 291 00:17:05,793 --> 00:17:08,403 ‫Eso debería hacer el trabajo, recarguemos aquí. 292 00:17:14,680 --> 00:17:17,313 ‫Está bien, esa no es la persona adecuada. 293 00:17:19,930 --> 00:17:21,853 ‫Por lo tanto, admin en natours. io, prueba uno 294 00:17:22,830 --> 00:17:27,413 ‫dos tres cuatro cinco, 295 00:17:29,230 --> 00:17:31,770 ‫para ver el error primero. 296 00:17:31,770 --> 00:17:34,270 ‫Y entonces ve, correo electrónico o 297 00:17:34,270 --> 00:17:37,490 ‫contraseña incorrectos, y por supuesto eso se debe a 298 00:17:37,490 --> 00:17:40,783 ‫que nuestra contraseña era incorrecta, así que eliminemos eso, 299 00:17:41,960 --> 00:17:44,750 ‫inicie sesión e inicie sesión con éxito. 300 00:17:44,750 --> 00:17:46,630 ‫Ahora veamos qué pasa. 301 00:17:46,630 --> 00:17:48,710 ‫Y en realidad no se recarga 302 00:17:48,710 --> 00:17:51,310 ‫automáticamente, porque antes de que eso suceda, 303 00:17:51,310 --> 00:17:52,970 ‫debemos cerrar esta ventana. 304 00:17:52,970 --> 00:17:54,700 ‫Entonces, una vez que cerramos, debería realizar la recarga de inmediato. 305 00:17:54,700 --> 00:17:57,963 ‫Y ahí vamos. 306 00:18:00,690 --> 00:18:01,973 ‫Ahora estamos en la página 307 00:18:02,950 --> 00:18:05,810 ‫de inicio, y nuevamente con nuestro menú de usuario correcto representado aquí, perfecto. 308 00:18:05,810 --> 00:18:10,213 ‫Así que esta parte también está completa y ahora, como 309 00:18:11,990 --> 00:18:14,530 ‫último paso, quiero mejorar estas alertas 310 00:18:14,530 --> 00:18:17,020 ‫que recibe el usuario. 311 00:18:17,020 --> 00:18:19,060 ‫En lugar de mostrar estas alertas de Java Script integradas. 312 00:18:19,060 --> 00:18:22,333 ‫Además, vamos a hacer ese paquete de Java Script que 313 00:18:23,230 --> 00:18:26,050 ‫ya mencioné un par de veces, pero lo 314 00:18:26,050 --> 00:18:28,490 ‫dejaremos todo para el próximo video 315 00:18:28,490 --> 00:18:31,320 ‫porque no quiero sobrecargar demasiado cada uno de estos.