1 00:00:01,180 --> 00:00:02,070 ‫Instructor: En 2 00:00:02,070 --> 00:00:04,620 ‫este video, crearemos la página de la cuenta 3 00:00:04,620 --> 00:00:07,270 ‫de usuario principalmente utilizando conceptos que ya conocemos 4 00:00:07,270 --> 00:00:08,823 ‫y que ya usamos antes. 5 00:00:10,560 --> 00:00:12,470 ‫Y comencemos por echar un vistazo a 6 00:00:12,470 --> 00:00:15,340 ‫lo que realmente quiero decir con la página de la cuenta de 7 00:00:15,340 --> 00:00:20,230 ‫usuario en nuestro sitio web de referencia, aquí en natours. dev. 8 00:00:20,230 --> 00:00:22,920 ‫Entonces, ya mostramos este menú aquí en 9 00:00:22,920 --> 00:00:24,210 ‫nuestro sitio web, 10 00:00:24,210 --> 00:00:27,430 ‫pero cuando hacemos clic en este usuario, obtenemos acceso 11 00:00:27,430 --> 00:00:30,210 ‫a la página de la cuenta de usuario. 12 00:00:30,210 --> 00:00:33,349 ‫Y aquí, podemos cambiar algunas configuraciones básicas, también 13 00:00:33,349 --> 00:00:35,807 ‫subir una nueva foto, pero esta 14 00:00:35,807 --> 00:00:37,540 ‫la vamos a hacer 15 00:00:37,540 --> 00:00:39,013 ‫en la siguiente 16 00:00:40,043 --> 00:00:44,690 ‫sección, y el usuario también puede actualizar su contraseña en esta página. 17 00:00:44,690 --> 00:00:47,590 ‫Luego, en el lado izquierdo hay algunos elementos 18 00:00:47,590 --> 00:00:49,740 ‫del menú, que realmente no 19 00:00:49,740 --> 00:00:52,120 ‫implementaremos, por lo que solo implementaremos 20 00:00:52,120 --> 00:00:55,027 ‫el menú, pero no realmente las páginas a 21 00:00:55,027 --> 00:00:57,840 ‫las que apuntan, y luego, si el usuario 22 00:00:57,840 --> 00:01:00,690 ‫es un administrador, también representaremos esta parte. aquí. 23 00:01:00,690 --> 00:01:04,380 ‫Bien, esto es lo que construiremos en esta conferencia, 24 00:01:04,380 --> 00:01:06,440 ‫y en las próximas 25 00:01:06,440 --> 00:01:09,440 ‫conferencias nos encargaremos de actualizar realmente la configuración. 26 00:01:09,440 --> 00:01:13,113 ‫Entonces, básicamente, hacer que estos botones funcionen aquí. 27 00:01:14,227 --> 00:01:15,060 ‫¿Está bien? 28 00:01:15,060 --> 00:01:17,620 ‫Pero por ahora, solo está renderizando esta página aquí 29 00:01:17,620 --> 00:01:19,443 ‫en esto. mi URL. 30 00:01:21,370 --> 00:01:22,610 ‫¿Okey? 31 00:01:22,610 --> 00:01:25,343 ‫Entonces, comencemos con la plantilla de pug. 32 00:01:26,250 --> 00:01:28,080 ‫Muy bien, y como 33 00:01:28,080 --> 00:01:30,873 ‫siempre, ya tengo esta plantilla de cuenta aquí. 34 00:01:32,050 --> 00:01:34,453 ‫Así que tomemos eso, copiemos y 35 00:01:37,810 --> 00:01:40,253 ‫luego creemos una nueva vista aquí, a 36 00:01:42,730 --> 00:01:44,360 ‫la que llamo cuenta. 37 00:01:44,360 --> 00:01:46,810 ‫Y ahora queremos ampliar 38 00:01:51,281 --> 00:01:56,270 ‫la base y queremos crear un bloque llamado contenido como siempre. 39 00:01:56,270 --> 00:01:59,863 ‫Y luego aquí es donde realmente pegamos nuestro contenido. 40 00:02:00,740 --> 00:02:02,010 ‫¿Está bien? 41 00:02:02,010 --> 00:02:04,000 ‫Ahora necesitamos sangrar 42 00:02:05,850 --> 00:02:09,803 ‫todo esto para que quede dentro del bloque. 43 00:02:10,640 --> 00:02:15,640 ‫Genial, entonces aquí primero tenemos nuestra navegación, ¿verdad? 44 00:02:15,670 --> 00:02:18,540 ‫Entonces, la configuración, las reservas, las reseñas y la 45 00:02:18,540 --> 00:02:21,020 ‫facturación que vimos allí en el 46 00:02:21,020 --> 00:02:25,430 ‫lado izquierdo de la página, y luego también tenemos la navegación del administrador, ¿verdad? 47 00:02:25,430 --> 00:02:28,590 ‫Y ya ven mucho código duplicado aquí. 48 00:02:28,590 --> 00:02:31,770 ‫Básicamente, los elementos de este elemento de la 49 00:02:31,770 --> 00:02:34,950 ‫lista aquí, aparecen en realidad ocho veces. 50 00:02:34,950 --> 00:02:38,970 ‫Así que cuatro veces aquí arriba y cuatro veces aquí abajo, así 51 00:02:38,970 --> 00:02:41,730 ‫que creemos rápidamente un mixin para que nuestro 52 00:02:41,730 --> 00:02:44,330 ‫código se vea un poco más limpio. 53 00:02:44,330 --> 00:02:46,310 ‫Muy bien, voy a seguir 54 00:02:46,310 --> 00:02:48,610 ‫adelante y copiar uno de estos. 55 00:02:48,610 --> 00:02:52,953 ‫Y luego crea un nuevo mixin llamado navItem. 56 00:02:55,600 --> 00:02:57,480 ‫Bien, lo hicimos antes. 57 00:02:57,480 --> 00:02:59,120 ‫Entonces esto es muy similar. 58 00:02:59,120 --> 00:03:01,500 ‫Entonces, ¿qué necesitamos pasar a 59 00:03:01,500 --> 00:03:05,100 ‫este mixin para personalizar básicamente cada uno de estos elementos? 60 00:03:05,100 --> 00:03:07,773 ‫Bueno, lo que va a cambiar es el enlace. 61 00:03:08,960 --> 00:03:13,960 ‫También el texto, la configuración, las reservas, etcétera. 62 00:03:14,790 --> 00:03:16,360 ‫Eso es texto. 63 00:03:16,360 --> 00:03:19,240 ‫Entonces también el ícono va a cambiar, 64 00:03:19,240 --> 00:03:21,980 ‫y finalmente ves que este primero 65 00:03:21,980 --> 00:03:25,690 ‫aquí tiene la navegación lateral - clase activa, ¿verdad? 66 00:03:25,690 --> 00:03:30,530 ‫Y entonces también especificaremos un activo como aquí básicamente. 67 00:03:30,530 --> 00:03:33,110 ‫Y luego, cuando queramos marcar un elemento 68 00:03:33,110 --> 00:03:35,390 ‫como activo, simplemente pasaremos por aquí. 69 00:03:35,390 --> 00:03:36,762 ‫¿Okey? 70 00:03:36,762 --> 00:03:39,573 ‫Así que ahora tenemos que arreglar la sangría aquí. 71 00:03:47,530 --> 00:03:49,123 ‫Y luego pasar nuestros datos. 72 00:03:54,930 --> 00:03:56,363 ‫El siguiente es el texto. 73 00:03:59,900 --> 00:04:01,900 ‫Así que esto, por supuesto, en 74 00:04:01,900 --> 00:04:06,607 ‫este punto, no es nada nuevo, así que lo estoy haciendo bastante rápido aquí, ¿verdad? 75 00:04:07,910 --> 00:04:12,000 ‫Entonces icono y luego el nombre del icono que pasamos. 76 00:04:12,000 --> 00:04:13,860 ‫Así como lo hicimos antes, 77 00:04:13,860 --> 00:04:15,640 ‫y finalmente este 78 00:04:15,640 --> 00:04:18,220 ‫activo aquí, recuerde, será verdadero o falso. 79 00:04:18,220 --> 00:04:21,840 ‫Y si es cierto, queremos agregar esta clase. 80 00:04:21,840 --> 00:04:22,753 ‫Copiémoslo. 81 00:04:23,950 --> 00:04:27,063 ‫Y luego aquí especifiquemos el atributo de clase. 82 00:04:29,820 --> 00:04:31,470 ‫Y luego, como hicimos 83 00:04:31,470 --> 00:04:33,910 ‫nosotros, hagamos una declaración de cambio aquí. 84 00:04:33,910 --> 00:04:38,480 ‫Entonces, si está activo, básicamente, aquí queremos 85 00:04:38,480 --> 00:04:42,003 ‫tener la navegación lateral: activa. 86 00:04:43,010 --> 00:04:45,490 ‫Y si no, no queremos nada. 87 00:04:45,490 --> 00:04:47,243 ‫Entonces, un nombre de clase vacío, básicamente. 88 00:04:49,030 --> 00:04:49,980 ‫Está bien. 89 00:04:49,980 --> 00:04:53,800 ‫Y ahora podemos reemplazar esto con nuestro mixin. 90 00:04:53,800 --> 00:04:57,270 ‫Eso se llama navItem, y recuerde, 91 00:04:57,270 --> 00:05:00,180 ‫escribimos + y luego navItem. 92 00:05:01,820 --> 00:05:05,230 ‫Entonces aquí el enlace es un enlace vacío. 93 00:05:05,230 --> 00:05:07,520 ‫Y de hecho para todos ellos por ahora. 94 00:05:07,520 --> 00:05:08,353 ‫Luego 95 00:05:09,780 --> 00:05:10,623 ‫Configuración, luego el 96 00:05:12,420 --> 00:05:14,980 ‫nombre del icono que también es Configuración, 97 00:05:14,980 --> 00:05:16,083 ‫pero en minúsculas. 98 00:05:18,341 --> 00:05:21,060 ‫Y luego, finalmente, este está realmente activo, por lo 99 00:05:21,060 --> 00:05:22,323 ‫que pasamos verdadero. 100 00:05:25,541 --> 00:05:28,057 ‫Muy bien, duplicémoslo. 101 00:05:31,710 --> 00:05:36,513 ‫Ten un maletín y tenemos Mis Reservas. 102 00:05:37,680 --> 00:05:39,490 ‫Hagamos eso en minúsculas. 103 00:05:39,490 --> 00:05:43,090 ‫Muy bien, duplícalo dos veces más. 104 00:05:43,090 --> 00:05:44,480 ‫Así que aquí 105 00:05:48,360 --> 00:05:49,990 ‫tenemos la estrella y luego 106 00:05:53,600 --> 00:05:56,423 ‫aquí la tarjeta de crédito para la facturación. 107 00:05:59,550 --> 00:06:00,383 ‫Está bien. 108 00:06:04,270 --> 00:06:06,820 ‫Y ahora tenemos la navegación de administrador. 109 00:06:06,820 --> 00:06:08,560 ‫Y este solo será 110 00:06:08,560 --> 00:06:11,660 ‫visible si el usuario actual es un administrador. 111 00:06:11,660 --> 00:06:15,660 ‫Así que definamos eso usando una declaración if. 112 00:06:15,660 --> 00:06:18,370 ‫Entonces, aquí tenemos que probar si el rol del usuario 113 00:06:18,370 --> 00:06:20,360 ‫es igual al de administrador, ¿verdad? 114 00:06:20,360 --> 00:06:21,270 ‫Y esa 115 00:06:21,270 --> 00:06:23,450 ‫es, nuevamente, una de estas declaraciones if más 116 00:06:23,450 --> 00:06:26,410 ‫complejas, por lo que tenemos que usar JavaScript para eso. 117 00:06:26,410 --> 00:06:29,441 ‫Entonces estoy usando aquí código sin búfer nuevamente. 118 00:06:29,441 --> 00:06:30,640 ‫Y luego, si 119 00:06:32,560 --> 00:06:35,710 ‫es así, tendremos acceso a la variable de usuario aquí. 120 00:06:35,710 --> 00:06:38,290 ‫Así como hicimos en otras plantillas. 121 00:06:38,290 --> 00:06:41,200 ‫Así que básicamente lo vamos a pasar aquí. 122 00:06:41,200 --> 00:06:44,750 ‫Y luego, por supuesto, el usuario tiene el atributo de rol, 123 00:06:44,750 --> 00:06:47,210 ‫por lo que probamos si es administrador. 124 00:06:47,210 --> 00:06:51,230 ‫Y si es así, queremos mostrar todo esto. 125 00:06:51,230 --> 00:06:54,963 ‫Por lo tanto, ahora debe tener una sangría de un nivel. 126 00:06:56,760 --> 00:06:57,593 ‫¿Okey? 127 00:06:57,593 --> 00:07:00,270 ‫Y, por supuesto, ahora queremos reemplazar 128 00:07:00,270 --> 00:07:03,023 ‫todos estos aquí con nuestro mixin también. 129 00:07:07,900 --> 00:07:09,083 ‫Entonces cuatro veces. 130 00:07:10,370 --> 00:07:13,003 ‫Este se llama mapa. 131 00:07:14,380 --> 00:07:15,613 ‫Gestionar recorridos. 132 00:07:23,350 --> 00:07:24,823 ‫Éste es Administrar usuarios. 133 00:07:38,080 --> 00:07:39,323 ‫Gestionar reseñas. 134 00:07:41,400 --> 00:07:43,800 ‫Y luego finalmente tenemos uno con el maletín. 135 00:07:46,450 --> 00:07:49,030 ‫Y este no tiene el texto aquí, 136 00:07:49,030 --> 00:07:50,723 ‫pero es Gestionar reservas. 137 00:07:55,548 --> 00:07:56,830 ‫Está bien. 138 00:07:56,830 --> 00:08:01,830 ‫Así que deshagámonos de eso y continuemos nuestro trabajo aquí. 139 00:08:01,850 --> 00:08:03,830 ‫Así que este será el 140 00:08:03,830 --> 00:08:06,130 ‫formulario para cambiar la configuración del usuario. 141 00:08:06,130 --> 00:08:10,600 ‫Y entonces los datos personales estarán aquí en estos valores, ¿de acuerdo? 142 00:08:10,600 --> 00:08:14,460 ‫Básicamente, en un elemento de entrada HTML, el valor es 143 00:08:14,460 --> 00:08:17,300 ‫una especie de texto predefinido que 144 00:08:17,300 --> 00:08:20,220 ‫podemos poner dentro de un elemento de entrada. 145 00:08:20,220 --> 00:08:21,690 ‫Y entonces, por lo general, lo 146 00:08:21,690 --> 00:08:23,930 ‫que ponemos allí es el valor actual de esa entrada, 147 00:08:23,930 --> 00:08:25,160 ‫es decir, de ese campo. 148 00:08:25,160 --> 00:08:28,780 ‫Y ahora mismo, ese es, por supuesto, el nombre del usuario. 149 00:08:28,780 --> 00:08:30,130 ‫Y pongamos eso aquí. 150 00:08:34,940 --> 00:08:36,480 ‫Usuario. nombre. 151 00:08:36,480 --> 00:08:40,202 ‫Y luego aquí abajo está, por 152 00:08:40,202 --> 00:08:42,693 ‫supuesto, el correo electrónico. 153 00:08:45,610 --> 00:08:49,343 ‫Y aquí también tenemos la imagen del usuario. 154 00:08:54,060 --> 00:08:59,060 ‫Por lo tanto, los usuarios de la barra de imágenes cortan el nombre de la imagen en sí. 155 00:09:01,610 --> 00:09:02,443 ‫Bueno. 156 00:09:04,350 --> 00:09:06,783 ‫Entonces aquí abajo no hay nada que hacer. 157 00:09:07,720 --> 00:09:08,670 ‫¿Está bien? 158 00:09:08,670 --> 00:09:10,470 ‫Y de hecho eso es todo. 159 00:09:10,470 --> 00:09:12,640 ‫Entonces, esos son realmente todos los datos 160 00:09:12,640 --> 00:09:14,620 ‫que provienen del objeto de usuario que 161 00:09:14,620 --> 00:09:15,823 ‫tenemos que ingresar. 162 00:09:17,300 --> 00:09:20,110 ‫Bien, esa es la plantilla. 163 00:09:20,110 --> 00:09:25,110 ‫Ahora sigamos adelante y agreguemos la ruta al viewRouter. 164 00:09:25,460 --> 00:09:29,813 ‫Así que aquí mismo, y este se llamará yo. 165 00:09:32,480 --> 00:09:35,560 ‫Y entonces tendremos un controlador llamado getAccount. 166 00:09:37,940 --> 00:09:39,330 ‫Ahora bien, esta de 167 00:09:39,330 --> 00:09:42,470 ‫aquí, por supuesto, va a ser una ruta protegida, ¿verdad? 168 00:09:42,470 --> 00:09:45,240 ‫Porque solo si estamos realmente 169 00:09:45,240 --> 00:09:48,260 ‫conectados tendremos acceso a esta página. 170 00:09:48,260 --> 00:09:52,020 ‫Y, por lo tanto, necesitamos usar nuestro middleware de protección aquí. 171 00:09:52,020 --> 00:09:55,973 ‫Entonces eso es un authController. proteger. 172 00:09:57,360 --> 00:09:58,730 ‫¿Okey? 173 00:09:58,730 --> 00:10:02,100 ‫Así como hicimos con todas o con otras rutas protegidas. 174 00:10:02,100 --> 00:10:04,500 ‫Ahora, un problema que veo con 175 00:10:04,500 --> 00:10:06,560 ‫esto es que este middleware 176 00:10:06,560 --> 00:10:09,280 ‫de protección aquí es muy similar al isLoggedIn. 177 00:10:09,280 --> 00:10:12,270 ‫Y entonces haremos algunas operaciones duplicadas allí, lo cual 178 00:10:12,270 --> 00:10:13,610 ‫no es ideal. 179 00:10:13,610 --> 00:10:16,500 ‫Porque recuerde que este isLoggedIn 180 00:10:16,500 --> 00:10:19,930 ‫se ejecutará para todas las solicitudes, ¿verdad? 181 00:10:19,930 --> 00:10:22,400 ‫Así que echemos un vistazo rápido a estos para 182 00:10:22,400 --> 00:10:24,203 ‫que pueda hacer mi punto. 183 00:10:25,300 --> 00:10:30,300 ‫Entonces, en Proteger, tenemos al usuario actual aquí. 184 00:10:30,720 --> 00:10:33,020 ‫Entonces tenemos este findById aquí. 185 00:10:33,020 --> 00:10:34,580 ‫Pero nosotros hacemos lo 186 00:10:36,757 --> 00:10:39,650 ‫mismo aquí abajo con la sesión iniciada, ¿de acuerdo? 187 00:10:39,650 --> 00:10:44,010 ‫Y así, al usar isLoggedIn y protect al mismo tiempo, haremos 188 00:10:44,010 --> 00:10:45,720 ‫esta consulta dos veces. 189 00:10:45,720 --> 00:10:48,410 ‫Y eso no es ideal, por supuesto. 190 00:10:48,410 --> 00:10:51,980 ‫Así que pongamos esto isLoggedIn aquí solo en 191 00:10:51,980 --> 00:10:55,210 ‫rutas que no están protegidas, ¿de acuerdo? 192 00:10:55,210 --> 00:10:56,660 ‫Porque en 193 00:10:56,660 --> 00:10:58,690 ‫la ruta protegida, esta verificación 194 00:10:58,690 --> 00:11:02,270 ‫si el usuario está conectado también ocurrirá, ¿verdad? 195 00:11:02,270 --> 00:11:03,870 ‫Pero no en este middleware, 196 00:11:03,870 --> 00:11:05,450 ‫sino en el 197 00:11:05,450 --> 00:11:09,000 ‫middleware de protección porque básicamente también lo comprueba, ¿verdad? 198 00:11:09,000 --> 00:11:12,573 ‫Así que cortémoslo desde aquí y simplemente pegámoslo en 199 00:11:12,573 --> 00:11:15,393 ‫otras rutas que no estén protegidas. 200 00:11:18,550 --> 00:11:20,300 ‫Vale, ¿tiene sentido? 201 00:11:20,300 --> 00:11:23,340 ‫Y así, no tenemos el problema de 202 00:11:23,340 --> 00:11:26,400 ‫básicamente hacer exactamente la misma consulta dos veces 203 00:11:26,400 --> 00:11:28,580 ‫en todos los middlewares protegidos. 204 00:11:28,580 --> 00:11:31,680 ‫Y eso es un poco mejor para nuestro desempeño. 205 00:11:31,680 --> 00:11:34,722 ‫Ahora bien, esta única cosa que hacemos en 206 00:11:34,722 --> 00:11:36,900 ‫isLoggedIn y que actualmente 207 00:11:36,900 --> 00:11:39,880 ‫no hacemos en protect es esto aquí. 208 00:11:39,880 --> 00:11:43,510 ‫Así que ponemos un usuario actual en la respuesta. lugareños. 209 00:11:43,510 --> 00:11:45,534 ‫Entonces, hagamos lo 210 00:11:45,534 --> 00:11:48,220 ‫mismo ahora en currentUser. 211 00:11:48,220 --> 00:11:51,543 ‫Entonces hagamos lo mismo aquí en el middleware de protección. 212 00:11:53,020 --> 00:11:56,510 ‫Así que pones el currentUser a pedido. usuario y en 213 00:11:56,510 --> 00:11:59,590 ‫respuesta. lugareños, ¿de acuerdo? 214 00:11:59,590 --> 00:12:01,600 ‫Para que podamos usarlo 215 00:12:01,600 --> 00:12:03,690 ‫automáticamente en todas las plantillas posteriores. 216 00:12:03,690 --> 00:12:07,560 ‫Entonces, en este caso, en nuestra plantilla de cuenta, ¿de acuerdo? 217 00:12:07,560 --> 00:12:08,693 ‫Así que dale una oportunidad. 218 00:12:10,080 --> 00:12:14,040 ‫Y ahora necesitamos agregar este controlador getAccount para, 219 00:12:14,040 --> 00:12:16,903 ‫por supuesto, corregir este error que 220 00:12:16,903 --> 00:12:18,293 ‫tenemos actualmente. 221 00:12:19,450 --> 00:12:20,900 ‫Eso es en viewsController. solicitud y respuesta getAccount. 222 00:12:27,467 --> 00:12:32,467 ‫Y verá en un segundo por qué solo necesitamos estos dos. 223 00:12:34,370 --> 00:12:37,170 ‫Entonces, para obtener la página de la cuenta, todo lo que realmente necesitamos 224 00:12:38,100 --> 00:12:39,580 ‫hacer es simplemente renderizar esa página. 225 00:12:39,580 --> 00:12:43,370 ‫Ni siquiera necesitamos consultar al usuario actual porque eso 226 00:12:43,370 --> 00:12:45,910 ‫ya se ha hecho en el 227 00:12:45,910 --> 00:12:47,760 ‫middleware de protección, ¿verdad? 228 00:12:47,760 --> 00:12:50,030 ‫Entonces, realmente todo lo que necesitamos hacer 229 00:12:50,030 --> 00:12:51,810 ‫es hacer algo como esto. 230 00:12:51,810 --> 00:12:54,110 ‫Así que copie este código y 231 00:12:54,110 --> 00:12:55,870 ‫luego aquí la cuenta. 232 00:12:55,870 --> 00:12:59,030 ‫Y démosle un título de Tu cuenta. 233 00:12:59,030 --> 00:13:04,030 ‫Muy bien, eso hace que ese error desaparezca. 234 00:13:04,430 --> 00:13:07,840 ‫Y ahora, como pieza final del rompecabezas, agreguemos el enlace correcto, 235 00:13:07,840 --> 00:13:09,880 ‫de hecho, en el encabezado. 236 00:13:09,880 --> 00:13:13,063 ‫Entonces, aquí en nuestro encabezado en este momento, el enlace 237 00:13:15,000 --> 00:13:18,110 ‫no apunta a esta página de cuenta, ¿verdad? 238 00:13:18,110 --> 00:13:21,670 ‫Entonces apunta a ninguna parte. 239 00:13:21,670 --> 00:13:24,043 ‫Y ahora debería apuntar a / me. 240 00:13:25,110 --> 00:13:27,713 ‫Está bien, y esa debería 241 00:13:28,820 --> 00:13:32,380 ‫ser la pieza final para que funcione. 242 00:13:32,380 --> 00:13:33,763 ‫Así que iniciemos sesión aquí 243 00:13:34,980 --> 00:13:36,840 ‫ahora con la prueba uno, dos, tres, cuatro. 244 00:13:38,281 --> 00:13:40,513 ‫Hemos iniciado sesión correctamente. 245 00:13:42,050 --> 00:13:44,320 ‫Y ahora al hacer clic aquí obtenemos nuestra página. 246 00:13:44,320 --> 00:13:48,950 ‫Fantástico. 247 00:13:48,950 --> 00:13:50,590 ‫Ahora hay un error aquí con la foto del usuario. 248 00:13:50,590 --> 00:13:54,030 ‫Así que arreglemos eso. 249 00:13:54,030 --> 00:13:55,270 ‫Pero además de eso, en realidad todo está funcionando bien. 250 00:13:55,270 --> 00:13:59,460 ‫También obtenemos este menú aquí porque actualmente estamos en administración, 251 00:13:59,460 --> 00:14:03,750 ‫así que probemos eso también en un segundo para ver 252 00:14:03,750 --> 00:14:06,370 ‫si desaparece para otros usuarios. 253 00:14:06,370 --> 00:14:08,903 ‫Y, de hecho, también recibimos este error 254 00:14:11,180 --> 00:14:14,150 ‫aquí porque tenemos una solicitud fallida para la imagen. 255 00:14:14,150 --> 00:14:17,500 ‫Y entonces ya vemos que probablemente estamos haciendo 256 00:14:17,500 --> 00:14:19,070 ‫algo mal allí. 257 00:14:19,070 --> 00:14:20,920 ‫Y aquí en 258 00:14:22,070 --> 00:14:25,860 ‫la imagen, por supuesto, no es el usuario. nombre, es usuario. Foto. 259 00:14:25,860 --> 00:14:30,500 ‫Así que dale un guardado, vuelve a cargar aquí. 260 00:14:30,500 --> 00:14:33,670 ‫Y ahora, de hecho, ahí vamos. 261 00:14:33,670 --> 00:14:35,483 ‫¿Está bien? 262 00:14:36,840 --> 00:14:37,673 ‫Así que ahora cierre la sesión, veamos qué pasa entonces. 263 00:14:37,673 --> 00:14:41,200 ‫Y luego obtenemos este tipo de error. 264 00:14:41,200 --> 00:14:43,460 ‫Y eso es básicamente porque estamos 265 00:14:43,460 --> 00:14:46,200 ‫intentando acceder a esta ruta protegida sin estar conectados. 266 00:14:46,200 --> 00:14:49,417 ‫¿Está bien? 267 00:14:49,417 --> 00:14:50,250 ‫Intentémoslo de nuevo ahora. 268 00:14:51,470 --> 00:14:54,540 ‫Entonces, si intentamos iniciar sesión con 269 00:14:54,540 --> 00:14:58,720 ‫/ me, obtenemos que no ha iniciado sesión, ¿de acuerdo? 270 00:14:58,720 --> 00:15:01,920 ‫Y antes de que obtuviéramos ese error de aspecto extraño 271 00:15:01,920 --> 00:15:04,550 ‫porque en este momento estamos en desarrollo. 272 00:15:04,550 --> 00:15:07,070 ‫Pero en producción, por supuesto, no veríamos ese extraño 273 00:15:07,070 --> 00:15:08,290 ‫error que vimos antes. 274 00:15:08,290 --> 00:15:11,850 ‫¿Derecha? 275 00:15:11,850 --> 00:15:12,710 ‫Pero lo que 276 00:15:12,710 --> 00:15:15,410 ‫vemos ahora es que, por supuesto, nuestra ruta realmente está protegida. 277 00:15:15,410 --> 00:15:16,930 ‫Por lo tanto, no podemos acceder a él si no estamos conectados. 278 00:15:16,930 --> 00:15:20,090 ‫Ahora, para terminar, inicie sesión con otra cuenta solo 279 00:15:20,090 --> 00:15:21,270 ‫para ver 280 00:15:21,270 --> 00:15:23,750 ‫si la parte del administrador también funciona. 281 00:15:23,750 --> 00:15:28,390 ‫Así que, de nuevo, usemos a Laura aquí. 282 00:15:28,390 --> 00:15:31,320 ‫Y ves que ella es solo una usuaria habitual. 283 00:15:31,320 --> 00:15:33,520 ‫Está bien. 284 00:15:41,620 --> 00:15:42,543 ‫Y ahora obtenemos 285 00:15:44,780 --> 00:15:47,950 ‫su cuenta de usuario, sin por supuesto, el menú de administración. 286 00:15:47,950 --> 00:15:49,740 ‫De acuerdo, perfecto. 287 00:15:49,740 --> 00:15:51,380 ‫Eso es construir la página de la cuenta. 288 00:15:51,380 --> 00:15:53,570 ‫Y como dije antes, en el 289 00:15:53,570 --> 00:15:55,830 ‫siguiente video, nos encargaremos de actualizar realmente 290 00:15:55,830 --> 00:15:57,700 ‫la configuración de esta cuenta.