‫Narrador: Bienvenido de nuevo.
‫Entonces, en este video, aprenderá una forma súper segura de cerrar
‫la sesión de los usuarios.
‫Entonces, hasta este punto, cuando queríamos eliminar un usuario,
‫simplemente eliminábamos la cookie de nuestro navegador.
‫¿Derecha?
‫Entonces algo como esto,
‫y luego elimínelo.
‫Sin embargo, la cuestión es que creamos esta
‫cookie como una cookie solo http.
‫Recuerde eso,
‫y eso significa que no podemos manipular esta
‫cookie de ninguna manera en nuestro navegador.
‫Por lo tanto,
‫no podemos cambiarlo y tampoco podemos eliminarlo.
‫Así que echemos un vistazo rápido a ese lugar del código
‫donde hicimos eso.
‫Entonces, en
‫el controlador de autenticación, allí arriba, donde realmente
‫creamos esa cookie, está aquí.
‫Y nuevamente, recuerde, que esto significa que no
‫podemos manipular la cookie en el navegador de ninguna manera.
‫Ni siquiera destruirlo.
‫Así que bórralo.
‫Entonces, si queremos seguir usando esta forma súper segura de almacenar
‫cookies, ¿cómo vamos a
‫poder cerrar la sesión de los usuarios en
‫nuestro sitio web?
‫Porque generalmente con la autenticación JWT simplemente eliminamos
‫la cookie o
‫el token del almacenamiento local.
‫Pero bueno, de nuevo, eso no es posible cuando se usa de esta manera.
‫Entonces, lo que haremos en su lugar es crear
‫una ruta de cierre de sesión muy simple que simplemente enviará
‫una nueva cookie con el mismo nombre
‫exacto pero sin el token.
‫Y entonces eso anulará la cookie actual que
‫tenemos en el navegador con una que tenga el mismo
‫nombre pero sin token.
‫Entonces, cuando esa cookie se envíe junto
‫con la siguiente solicitud, no podremos identificar al
‫usuario como si hubiera iniciado sesión.
‫Y entonces esto efectivamente cerrará la sesión del usuario.
‫Y también le daremos a
‫esta cookie un tiempo de vencimiento muy corto.
‫Entonces, esto será un poco como
‫eliminar la
‫cookie, pero con una solución muy inteligente como esta, ¿de acuerdo?
‫Así que hagámoslo aquí, justo después de iniciar sesión.
‫Entonces, nuevamente, cuando hacemos autenticación basada en token, generalmente nunca
‫necesitamos un punto final como este,
‫pero cuando queremos enviar una cookie súper segura como lo hacemos bien, entonces
‫tenemos que hacerlo así.
‫Entonces, nuevamente, en la respuesta configuramos la cookie, y el
‫secreto es darle exactamente el mismo nombre.
‫Así que tal como
‫mencioné antes, y eso es jwt.
‫Así que igual que aquí, ¿de acuerdo?
‫Pero aquí, luego enviamos el
‫token, pero ahora enviaremos simplemente un texto ficticio.
‫Digamos que se desconectó y luego
‫las opciones de cookies.
‫Entonces, una fecha de vencimiento, como en 10
‫segundos a partir de ahora.
‫Así que creemos una nueva fecha
‫basada
‫en la fecha. ahora
‫más 10 segundos.
‫Entonces eso es 10 veces 1000.
‫Y también voy a configurarlo, nuevamente, solo en http.
‫Establecido en verdadero,
‫pero no es necesario que lo establezcamos como
‫seguro, porque en este caso no hay
‫datos confidenciales que cualquiera pueda obtener.
‫Aquí nos falta la coma, por
‫lo que ahora todo lo que tenemos que hacer es devolver esta respuesta.
‫Así que el estado 200 y
‫simplemente marquémoslo como éxito aquí.
‫Luego, en nuestra ruta, debemos agregarlo, por supuesto, también para que
‫esté en la ruta del
‫usuario, así que hagámoslo aquí después
‫de iniciar sesión, pero esta será una solicitud de
‫obtención porque no vamos a
‫enviar ningún dato.
‫junto con la solicitud,
‫no cambiamos nada, simplemente obtenemos una cookie.
‫Y ese nombre realmente tiene sentido.
‫O ese verbo realmente tiene sentido.
‫Así que cierre
‫la sesión, y ahora estamos listos para tomar esa ruta tal como
‫lo hicimos aquí con nuestra biblioteca Axios.
‫Entonces, exporta, cierra la sesión
‫o en realidad const
‫primero y, al
‫igual que antes, estamos usando
‫un bloque try catch que en
‫este caso no es realmente tan importante porque
‫realmente no puede haber un error al cerrar la
‫sesión, ¿verdad?
‫Pero de todos modos, por si acaso, por
‫ejemplo, no tenemos conexión a Internet.
‫Entonces, en ese caso, obtendremos un buen error
‫y hagámoslo primero aquí.
‫Así que muestra el
‫error al cerrar
‫la sesión, inténtalo de nuevo.
‫Está bien, pero esto aquí, como dije, no
‫debería suceder tan a menudo.
‫Entonces, en
‫cambio,
‫hagamos nuestra solicitud con Axios.
‫Está bien.
‫Entonces, el método esta vez es obtener
‫y la URL es
‫similar a la que tenemos
‫aquí, pero es
‫cerrar sesión.
‫Y luego, como paso siguiente, recarguemos también la página.
‫Entonces eso es lo que siempre
‫hacemos manualmente cuando eliminamos una cookie, ¿verdad?
‫Y aquí, por supuesto, tenemos que hacerlo programáticamente.
‫¿Derecha?
‫Y tenemos que hacerlo aquí
‫porque, dado que se trata de una solicitud de Ajax, no podemos hacerlo en la
‫parte de atrás.
‫Entonces no podemos hacerlo con express.
‫Y entonces, por supuesto, debemos hacerlo manualmente aquí.
‫¿Derecha?
‫De lo contrario, técnicamente se cerraría la sesión, pero nuestro
‫menú de usuario aún se reflejaría, por lo
‫que aún mostraría que hemos iniciado sesión.
‫Y, por supuesto, simplemente necesitamos volver a cargar la página
‫que luego enviaría la cookie no válida básicamente al
‫servidor, de modo
‫que la que acabamos de recibir sin un token
‫y luego ya no estamos conectados,
‫y por lo tanto, nuestro menú de usuario lo hará. desaparecer, ¿de acuerdo?
‫Así que hagámoslo si ha tenido éxito.
‫Así que, como antes, descansa. datos. estado.
‫Y así, en este punto final, también enviamos el estado
‫establecido a éxito, y
‫así podemos probarlo una vez más aquí.
‫Entonces, si este es el
‫caso, en realidad ni siquiera lo necesitamos, así que
‫en este caso, la ubicación de la viuda. recargar.
‫Y luego algo realmente importante es
‫que realmente necesitamos configurarlo como verdadero aquí, y
‫eso luego forzará una recarga desde el servidor
‫y no desde la caché del navegador, ¿de acuerdo?
‫Ahora y, por supuesto, debemos marcarlo aquí como
‫asíncrono, y está bien.
‫Entonces, esta parte aquí es realmente importante nuevamente porque,
‫de lo contrario, podría simplemente cargar la misma
‫página desde
‫el caché, lo que aún tendría nuestro menú de usuario allí.
‫Pero, por supuesto, eso no es
‫lo que queremos, realmente queremos que salga una página nueva del servidor.
‫¿Está bien?
‫Así que tenemos nuestra función de
‫cierre de sesión y ahora en el índice básicamente necesitamos activarla una
‫vez que presionemos ese botón.
‫Entonces, primero creemos un elemento aquí.
‫Entonces, el documento del
‫botón de cierre de sesión. querySelector y
‫recuerda cómo creamos este elemento.
‫Así que eso es aquí.
‫Entonces este.
‫Así que estamos seleccionando ahora por esta clase.
‫Está bien, y por supuesto también podríamos usar una identificación aquí,
‫pero eso no es realmente importante, ¿de acuerdo?
‫Lo que importa aquí es decir ahora si
‫hay un botón
‫para cerrar sesión, entonces logOutButton. addEventListener.
‫Así que queremos que escuche todos los eventos
‫que suceden en ese botón cada vez que hay un clic.
‫Así que estamos esperando el evento de
‫clic y cuando eso sucede, llamamos a la función de
‫cierre de sesión que aún no importamos,
‫así que agreguemos eso aquí.
‫Así que inicie sesión y cierre la sesión.
‫Está bien, y eso debería ser realmente.
‫Entonces, probémoslo ahora.
‫Vuelva a cargarlo solo para estar seguro, y
‫ahora Oh, obtenemos
‫un error al cerrar la sesión.
‫Inténtalo de nuevo, ¿por qué?
‫Bueno, intentemos ver mejor el error.
‫Pero lo importante es que en realidad todo esto
‫ya está funcionando.
‫Entonces, este oyente de eventos
‫aquí y también esta función de cierre de sesión están haciendo su trabajo.
‫Así que
‫hagamos la consola. error de registro. respuesta.
‫Así que recarguemos esto aquí.
‫Debería suceder automáticamente.
‫Está bien.
‫Así que inténtalo de nuevo.
‫Entonces, ¿qué está sucediendo aquí, así
‫que el lanzamiento a la identificación del objeto falló para el cierre de sesión del valor?
‫Eso es muy extraño.
‫Eche un vistazo a esa ruta.
‫Oh, por supuesto,
‫eso es un grave error.
‫Por supuesto, debería iniciar sesión.
‫Está bien, pero este tipo de curso, de nuevo, sucede todo el tiempo.
‫Así que recarguemos esto aquí.
‫E intente esto de nuevo.
‫Y ahora estamos obteniendo algo aquí.
‫Ahora sigue siendo un
‫error, pero eso no es ningún problema.
‫Entonces, tenemos un error de token web
‫JSON porque nuestro token web JSON tiene un formato incorrecto.
‫Y así viene,
‫como puede ver, del middleware registrado.
‫Y entonces podemos adivinar por qué es eso, ¿verdad?
‫Así que volvamos a agregar nuestro controlador de autenticación.
‫Entonces, el token web JSON
‫que básicamente estamos enviando ahora está aquí, ¿verdad?
‫Así que esto se desconectó.
‫Y entonces
‫aquí en isLoggedIn eso básicamente desencadenará un error.
‫Entonces, aquí en JSON web token verificar, ¿verdad?
‫Y dado que toda esta función aquí
‫está incluida en este catchASync, enviará este error a todo el middleware
‫de manejo de errores globales.
‫Y eso creará entonces este error que en este
‫caso no queremos, ¿recuerdas?
‫Entonces, en
‫este middleware isLoggedIn no queremos causar ningún error.
‫Entonces, solucionemos eso y,
‫por lo tanto, eliminaremos este catchASync de
‫aquí porque no queremos detectar ningún error Async.
‫En cambio, lo que queremos hacer es
‫básicamente detectarlos localmente y
‫luego, si hay un error, simplemente diga siguiente.
‫Así, ¿de acuerdo?
‫Así que hagámoslo.
‫Así que envuelve todo esto en un intento.
‫Ciérralo aquí.
‫Bueno, algo más anda mal.
‫¡Ah! Probablemente nos falte el bloque de captura.
‫Entonces, en este caso, queremos pasar al siguiente middleware.
‫Básicamente, digo que no hay ningún usuario que haya iniciado sesión.
‫¿Derecha?
‫Entonces, probemos de nuevo.
‫Regrese, oh, y ahora ya no estamos conectados.
‫Así que inicia sesión.
‫Eso fue exitoso.
‫Y ahora, de inmediato, cierre la sesión.
‫¡Ah! ¡Hermosa! Ahora funciona correctamente.
‫Y entonces, esta vez, lo que sucedió aquí es
‫que, por supuesto, esta verificación aquí
‫falló porque ese token web JSON no estaba en el formato
‫que esperaba este algoritmo.
‫Pero lo que sucedió en este caso es
‫que el error no se detectó
‫usando nuestra función catchASync, sino que fue directamente a catch
‫err, que luego pasó directamente al siguiente middleware.
‫¡Muy bien, genial!
‫Entonces, si ahora echamos un vistazo a nuestras
‫cookies, bueno, tenemos una en uso que probablemente ya haya caducado.
‫Verá que solo tiene esta vida de 10 segundos y, por lo tanto,
‫si recargo esta página ahora, en realidad,
‫ya debería haber desaparecido.
‫Entonces ves cero cookies en uso.
‫De acuerdo, y eso es todo lo que tenemos
‫que hacer para cerrar la sesión del usuario en nuestro sitio web.