El curso definitivo de JWT [SingUp, inicia sesión y inicia sesión con MERN Stack ]

1. INTRODUCCIÓN: Bienvenido al último curso de JWT. En esta clase, vamos a aprender JWT en un lenguaje fácil y sencillo. Después de completar este curso, usted tiene una comprensión adecuada de JSON Web Tokens. Entonces, antes que nada, vamos a ver qué es JWT, por qué lo necesitamos. Después de eso, comenzaremos con la parte back-end de JWT, que es cómo generar tokens, cómo verificar tokens e implementar la API de seguridad solo para usuarios registrados. Después de eso, pasaremos a la parte front end en la que almacenamos Dogan en nuestro navegador. Implementando características de inicio de sesión y cierre de sesión, enviando token en el encabezado y creando componente para ruta privada. En la sección Proyecto, obtendrás todos los recursos para esta clase. Estoy muy emocionada por esta clase y espero que tú también lo estés. Empecemos. 2. ¿Qué es JWT y por qué lo necesitamos?: Así que JWT significa token web JSON, que se utiliza para transferir información de forma segura entre dos partes, como back-end y front-end. Pero la razón principal para usar JWT es autenticar al usuario con el uso de su token. Entendamos esto con el ejemplo. Aquí apenas hay un login con su información de cuenta, correo electrónico, y contraseña. Ahora nuestro servidor más j, la inflamación. Y si es cierto, entonces el servidor le devuelve el ID de usuario como respuesta y almacena eso en el ciudadano o cookie. Ahora cada vez que envía la solicitud alguna información segura, digamos toda su información bancaria. publicación del servidor se pidió el ID de usuario. Y si tiene ID de usuario, entonces y luego servidor envía la información segura. Pero aquí un gran problema, esta no es nuestra cookie en la que almacenamos nuestro ID de usuario. Se puede modificar fácilmente en el navegador. Digamos que acabo de cambiar este ID de usuario por otro ID de usuario. Después obtenemos la información sobre ese usuario. Por lo que este enfoque no está asegurado. Ahora para resolver este problema, presentamos el token web JSON. Ahora apenas vuelve a iniciar sesión con su correo electrónico y contraseña. Ahora nuestro servidor se hizo una pausa para comprobar la inflamación. Y si es cierto, entonces el servidor devuelve el token único cifrado y lo almacena en el almacenamiento local. Ahora lo bueno de este token es que está hecho con detalles de usuario y una clave secreta que definimos en el servidor. Así que cada vez que apenas envía una solicitud a la política de información actual, entonces la publicación del servidor solicitó el token JWT, verifíquelo usando nuestra clave secreta. Si se verifica, entonces y después el servicio y esa información del buscador. Y si cambiamos algo en información del usuario que nuestro token cambiará. Entonces es por eso que usamos JWT, autenticación de usuarios. Sé que tienes muchas preguntas relacionadas con el token web JSON, pero mira este tutorial completo, despejará tus dudas. En este tutorial, voy a usar NodeJS como backend y React JS para el front end. Pero aún puedes seguir estos sin importar el lenguaje de programación que uses. 3. Comenzar con Backend: Aquí creo un proyecto sencillo en Node.JS en el cual post conecto este servidor de nodos con mi base de datos localhost MongoDB y escucho este servidor en localhost por mil. Por cierto, también puedes descargar el código de inicio. Primero instalemos todas las dependencias para este proyecto. Así que abre terminal y escribe npm instalar. Déjalo correr en segundo plano. Ahora en la carpeta models, creé un usuario modelo con solo tres píldoras, nombre, correo electrónico y contraseña. Ahora en la carpeta de ruta, defino todas las rutas. El recorrido del autobús es para el registro de usuarios en este archivo users.js. Entonces aquí, primero obtenemos todos los datos del cuerpo del punto de solicitud y lo deestructuramos. Después comprobamos si hay usuario existente. Y después de eso, vamos a guardar la información del usuario en la base de datos y la información del usuario de Sandy ya que responde ruta bastante simple. Entonces en el archivo server.js, importo este usuario hacia fuera y defino este pad de ruta como API menos usuario. Así que abre diez minuto y escribe servidor Norman. Esto actualizará continuamente el servidor en Jane's. Genial, conseguimos la base de datos conectada. Entonces vamos a probar es con Cartero. Ahora paso nuestra ruta aquí y selecciono fila y Jason. Ahora aquí paso objeto de datos y da click en Enviar y vemos que obtenemos datos de usuario. Ahora, si B vuelve a dar clic en el botón Enviar, entonces obtenemos usuario ya existe. Entonces esa es la pequeña introducción para quién está viendo el tiempo de pausa del nodo solo para entender. Del mismo modo, tenemos otra ruta llamada odd para login. Déjame mostrarte directamente en Cartero. Por lo que paso correo y contraseña correctos. A continuación, haga clic en Enviar. ver, obtenemos usuario actual. Pero si pasamos contraseña incorrecta, entonces obtenemos error. Ahora hay tres tareas principales para JWT en back-end. Vigilado. Uno es generar token en el registro. Segundo, Generar token al iniciar sesión. Y por último, cuando el usuario pide información de seguridad, tenemos que verificar token. Comencemos con la tarea número uno. 4. Generación de token JWT en registro y inicio de sesión: Así que abre terminal y agrega nueva terminal y escribe npm I, JSON Web Token y pulsa Enter. Ahora usuario fuera. En la parte superior declaro JWT es igual a dos token web requerido y decente. Ahora después de almacenar los datos en el registro, razona el Token JWT o el signo de punto JWT. Ahora primer argumento son nuestros datos que queremos pasar con este token. Así que creo una nueva variable llamada datos JWT porque para subrayar ID usuario punto subrayado id nombre coma, user.name. Ahora pasa aquí estos datos de JWT. Ahora el segundo parámetro es nuestra clave secreta JWT. Por lo que podemos pasar aquí cualquier cadena como código te bendiga, o lo que sea. Esta clave secreta es muy importante para la autenticación. En este caso, no está asegurado. Por lo que declararemos nuestra clave secreta en el archivo punto ENV aquí mismo. Jwt secret equivale a algo así como 123 code blast o algo que no adivinará fácilmente. Al igual que si estás creando la app Zomato, clave secreta es como Zwicky es la mejor. Ahora guárdalo y vuelve a nuestra ruta de usuario. Por aquí agregamos punto procesado ENV, secreto de JWT. Con este punto de proceso ENV, podemos acceder a la variable de este archivo ENV. Ahora, si quieres caducar token en algún tiempo, entonces también podemos definir eso. Por lo que quiero caducar este token en horas. Entonces, si un usuario compra este token después de dos horas, ellos cómo iniciar sesión de nuevo para nuevo token, ¿verdad? En objeto caduca en y entre comillas dobles. Se puede escribir el tiempo. Si quieres exportarlo en un día, entonces pasa 1D. Pero paso aquí a mojado o dos horas. Nuevamente decirte esto es opcional. Ahora almacene esto en una variable llamada token en la respuesta, envíe token, guarde los cambios. Ahora en carteros, creamos un nuevo código de usuario para leer gmail.com y dar clic en Enviar. Ves, obtenemos este token encriptado. Ahora copia este token y encabezado a Jwt.io. Este es el sitio oficial de JWT. Puedes leer aquí su documentación. Ahora da clic en este depurador. Sí, podemos decodificar nuestro token. Ahora vamos a entender lo que dentro este token basó nuestro token aquí. Ahora, todas las fichas divididas en tres partes. La primera parte es sobre cabecera, que está en color rojo. La segunda parte trata de la carga útil, que está en morado. Y la última y más importante parte es la firma, que es en color azul. Ahora este encabezado contiene el algoritmo y el tipo token, lo cual es muy común. No te enfoques en eso. Ahoraesta carga útil contiene los datos a los que queremos pasar este token. En nuestro caso, pasamos identificación y nombre. ver, aquí obtenemos nuestros datos. que podamos mostrar esos datos en nuestro front-end sin solicitudes de nueva API. Y tenemos más datos, lo que significa emitido en el valor es el momento en que nuestro token generado. Y EXP es nuestro tiempo de exploración. Ahora la última parte, firma, que se genera en base a nuestro encabezado, esta carga de datos y clave secreta, que sólo está disponible en el servidor. Por lo que esto evitará que los usuarios obtengan su propio Dogan y luego lo modifiquen con ID para pretender ser otra persona. Porque si modificas algo en esta carga útil o encabezado, entonces la firma lo regenerará. No hay posibilidad de que el usuario haga algo poco ético. Entonces por eso JWT es tan popular. Por lo que creamos con éxito nuestro registro JSON Web Token Board. Ahora hagamos lo mismo para iniciar sesión. Así que copia estas tres líneas y ve al archivo ahd dot js y pega aquí. Y en la parte superior, redeclare JWT es igual a requerir JSON Web Token y guardarlo. Ahora en login, paso alto corrige los datos y envíalo. ver, obtenemos token. Completamos con éxito o segunda tarea o backend. 5. Verificar el token en la ruta asegurada: Ahora la última tarea, que es sedes o solicitar ruta asegurada, lo que significa que los datos sólo son accesibles para los usuarios conectados. Entonces tenemos que hacer una pausa para verificar el JSON Web Token. Y si es válido, entonces devolvemos datos. Por lo que en el archivo users.js, agregamos nueva API, obteniendo la información actual del usuario registrado , que se mostrará en el palpado del sujetador. Así que el punto correcto del router obtiene la ruta Les Paul y agrega una función con la respuesta de la solicitud. Ahora, necesitamos crear nuestro middleware en el que verificamos token en cada ruta segura. Así que crea una nueva carpeta llamada middleware. Y dentro de ella, creamos un nuevo archivo llamado ab.js. Genial. Ahora aquí primero definimos la función y añadimos module.export o exportamos esta función. Ahora podrías saber que nuestra función middleware tiene tres parámetros, request, response y el siguiente. Ahora, no nos preocupemos por esto. Ahora dentro de esto, primero pasamos el token que se pasa por cabecera. Por lo tanto, solicite cabecera y pase aquí el nombre del encabezado, paso x o token, que se usa comúnmente nombre. Puedes pasar lo que quieras para almacenar esto en la variable token. Después de eso, comprobaremos si el token no está disponible. A continuación, devuelve el estado de puntos de respuesta para 01, Dotson, y bajo, acceso denegado. Dogan no encontrado. Y si token está disponible, entonces lo verificamos. Entonces, en la parte superior, redeclare JWT equivale a requerir token web JSON. Ahora aquí escribimos JWT dot verifica. Ahora el primer parámetro es nuestro token, que queremos verificar. El segundo parámetro es nuestra clave secreta JWT. Así que a la derecha, punto de proceso ENV, secreto JWT. Ahora esto nos dará id y nombre, que pasamos antes. Así que vamos a almacenar esto en el usuario variable, y pasamos que los valores en solicitud de usuario punto es igual a usuario. Después de eso, llamaremos a la siguiente función. Por lo que ejecutará la API. Ahora bien, si este token es válido, entonces este código nos dará error. Soviético tratar de atrapar bloque para eso. Ahora, mueve esto dentro intenta bloquear. Ahora en este bloque catch, escribimos estado de punto de respuesta, 400. Los puntos envían token no válido y lo guardan. Ahora de vuelta a la ruta users.js. Y primero importamos impar. Así que escribe const impar es igual a dos, requiere middleware de barra de doble punto, menos impar. Ahora pasamos este extraño middleware aquí. Entonces cuando alguien llamó a esta API, este middleware extraño se ejecutará. Y si se verifica token, entonces, y luego se ejecutará esta función. Ahora de inmediato IT User dot encontrar por ID y solicitud de contraseña punto usuario punto subrayado ID, que declaramos en otoño middleware, y lo almacenamos en una variable llamada perfil. Después puntos de respuesta y perfil. Aquí le agregamos un peso. Por lo tanto, tenemos que escribir aquí asíncrono, Guárdalo. Ahora probemos esta API privada. Así que de nuevo a Postman y añadir nueva solicitud y pasar aquí http colon doble barra local host, colon Python slash api slash usuario, y haga clic en Enviar. ver, obtenemos el mensaje de error de acceso denegado porque no hemos pasado token en encabezado. Así que ve a la sección de Encabezado. Y aquí está x odd token, que pasamos en middleware otoñal. Y aquí pasamos nuestra ficha. Entonces copio este token de login, gusto y lo pego aquí. Ahora da clic en enviar y obtenemos el perfil de usuario. Ahora, si cambiamos algo en este token y lo enviamos, entonces obtendremos token inválido. Por lo que nuestra parte de back-end se completa aquí. Minimizar este servidor vía score porque necesitamos seguir ejecutando este servidor. Ahora veremos cómo manejar JWT en React. 6. Cómo empezar la autenticación de Frontend: Entonces aquí abrí la carpeta del cliente en otro Código VS. En primer lugar, instalaremos todas las dependencias. Así que abre y escribe npm install y deja que se ejecute en segundo plano. Permítanme darles una visión general rápida de esta aplicación React. Entonces en este componente de app, creo una barra ahora, y dentro del caracol malo, creo tres enlaces ahora. Y para el enrutamiento, creo este componente de enrutamiento en el que defino todas las rutas como home, login y register, simple como eso. Vamos a ejecutar esta aplicación. Así que abre un terminal y escribe npm start y pulsa Enter C. Este es nuestro componente home. Después de eso, tenemos formulario de inicio de sesión en la página de inicio de sesión. Entonces si escribimos correo electrónico y contraseña y luego enviamos el formulario, obtenemos valores en consola. Similar a esto, contamos con formulario de registro. Llenamos el formulario y damos clic en el botón Registrarse. Entonces obtenemos valores en consola, así sucesivamente, JWT, cuando usas una resistencia, enviamos token desde el back-end, ¿verdad? Entonces, después de eso, almacenamos ese token en el almacenamiento local del navegador y pasamos ese token cuando hacemos cualquier solicitud API segura. En nuestro ejemplo, nuestra API de perfil. Tan similar al backend, tenemos tres tareas para front-end. El primero es que almacenamos token en resistor. En segundo lugar almacenamos token en Login. Y por último, dijimos token a nuestro encabezado. Para que podamos hacer solicitud API segura. 7. Cómo guardar token en registro y iniciar sesión: Así que abre terminal y agrega nueva terminal y escribe npm I SEOs y pulsa Enter. Si no conoces a los SCO, tu inyecta mi video guía de XES. Ahora creo una nueva carpeta llamada utils para utilidades y creo un nuevo archivo con el nombre STDP ab.js. Ahora en este archivo, en primer lugar, importo de ceros. Y después de eso, creo una variable llamada instancia es igual a XES dot create. Ahora pasa objeto y dentro de él, reescribe la URL base. Aquí. Podemos pasar nuestra URL base backend, que es http colon doble slash host local colon por mil menos API. Y al final, exportar instancia predeterminada. Así que básicamente creamos un atajo para hacer solicitud API. Por lo que no necesitamos escribir cada vez URL completa. Si hacemos request o localhost colon pi mil slash api slash user, entonces tenemos que simplemente escribir slash user. Ahora ve al registro de carpeta de componentes y abre este archivo de registro dot js. Por lo que este es un formulario de inscripción. Ahora en la función submit, llamaremos a nuestra API de registro. Entonces en la parte superior, primero importamos STDP desde, vamos a tenedores arriba y sumamos detalles como PIB. Ahora me quito esta consola de aquí mismo, http dot post. Ahora el primer parámetro es la ruta de nuestra API, que es menos usuario. Y el segundo parámetro son los detalles del usuario. Ahora esta declaración devuelve una promesa. Manejemos esto con espera asíncrona. Escribo aquí de ocho, y aquí pasamos AC. Ahora vamos a almacenar este valor en una variable llamada respuesta. Y consolar esta respuesta, guarda los cambios y echa un vistazo, ve a resistencias y pega y llena los datos con un correo electrónico único. Y da clic en el botón Registrar. ver, obtenemos este objeto de respuesta. Entonces en estos datos, obtenemos nuestro token. Distraigamos esta respuesta y obtengamos esta propiedad de datos. Ahora, hagamos nuestro token en nuestro almacén local. Por lo que nuestro navegador tiene su propio almacenamiento pequeño. Por lo que escribimos almacenamiento local, punto set item. Ahora la variable post es el nombre de este campo, que es token. Y segundo, pasamos datos, que es token real. Y después de eso, trasladaremos usuario a la página principal. Para la navegación. Usamos el router React dom. En la parte superior. Yo uso importante navega desde React router dom, termina aquí mismo. Deje navegar es igual a utilizar navegar. Y después de esto, escribimos navegar. Y dentro de ella, pasamos nuestro camino, que es menos asistentes de ventas, y echar un vistazo. Ahora pasa un e-mail diferente y da clic en el botón Registrarse. A ver redirigimos a la página principal. Déjame mostrarte dónde almacenamos nuestro token. Así que ve al panel de aplicaciones por aquí. Ahora haz clic en historias locales y selecciona tu URL web. Ver, restauró nuestra ficha aquí. Ahora vuelve a registros y palma y compra los mismos datos y da click en Registrarse. En consola, obtenemos error. Así que volvamos a nuestra aplicación React. Y añadimos bloque try-catch para manejar esta discordia de modo de error en este bloque try, enganche block. Simplemente consolaremos esta época, guardaremos los cambios, y echaremos un vistazo. Haga clic en el botón Registrar. ver, obtenemos el objeto sumador. Ahora en esta respuesta de error, obtenemos nuestros datos, que enviamos desde el usuario back-end ya existe. Entonces escribimos aquí si sumador punto respuesta está disponible y luego sumador punto response.status es igual a 400. A continuación, establezca el error, sumador punto response.data, que es nuestra variable de estado. Porque no queremos mostrar ninguna otra sumadora que no enviamos desde backend. Y en la parte inferior, ya agrego la condición, que es si sumador está disponible, luego imprimo ese error, cambia y echa un vistazo. Ahora hago clic en este botón Registrarse y obtenemos esta era ahora similar a nuestra página de inicio de sesión. Así que copio este try and catch block y abro login dot js page. Y en la función de enviar mango, péguela. Ahora copia esto a las importaciones y pégalo en el componente de inicio de sesión. Ahora copia esta última línea de navegación y pégala. Por lo que ahora aquí cambiamos la ruta de usuario, hacemos impar y compra este formulario de datos, que también es detalles del usuario. Los asistentes, y echar un vistazo. Ahora llena este formulario con la información incorrecta y vemos que obtenemos nuestra sumadora ahora más allá de la información correcta. Y z realmente directo al componente casero. Y también puedes revisar tokens almacenados en el almacenamiento local. 8. Cómo obtener información de usuario de token: Ahora no quiero mostrar este login y enlace de registro si un usuario ya está conectado. Así que de vuelta a Add Component, creamos una variable de estado llamada user y valor inicial a null. Y en la parte superior, import lo usó desde React. Ahora la lógica es cuando la fecha de estos usuarios es nula, lo que significa que el usuario no está conectado. El usuario está disponible, luego el usuario inicia sesión. La pregunta es, cómo podemos obtener los datos actuales del usuario. Recuerda, pasamos nuestros datos de usuario a nuestra sección de carga útil de JWT. Entonces usamos esos datos aquí para autenticarse. Ahora añadimos aquí condición. Si en el almacenamiento local tenemos token, entonces obtenemos datos del token, ¿verdad? Si el token de punto de almacenamiento local está disponible, cambie el estado del usuario. Ahora cómo podemos decodificar nuestro token y obtener esos datos para que tengamos una biblioteca llamada decodificación JWT. Así que abre terminal y escribe npm I JWT dash d code y presiona Enter y cierra este terminal. Ahora aquí importamos decodificación JWT de JWT decor. Ahora dentro de este IV, obtenemos el primer token del almacenamiento local, punto get item y token. Y ahora usamos decoración JWT. Y dentro de esto, pasamos este token JWT. Ahora almacene esto en usuario de registro variable y establezca usuario para registrar usuario. Ahora, vamos a consolar esta variable de estado de usuario. Guarda los cambios, y echa un vistazo y obtenemos error, que se debe a bucle infinito. Déjame explicarte aquí. Primero, comprobamos si hay token y dijimos datos de usuario a esta variable de usuario, que crea en bucle finito. Por lo que tenemos que mover este código fuera de este componente de aplicación. Ahora elimine esta función de usuario establecida y dirija la ruta este valor de usuario de registro como valor inicial. Ahora antes de esta condición if, redefinir esta variable de usuario de registro porque si token no está disponible, entonces no podemos acceder a este log es una variable y eliminar esta constante también. Ahora guarda los cambios y echa un vistazo. ver, obtenemos nuestros datos de usuario. Ahora usando esta variable de usuario, mostraremos enlaces privados y días de altura de inicio de sesión y enlace de registro. Tan pasado este usuario como indicaciones en este componente Navbar. Ahora en ahora por componente, estructura 3D apoyos y obtener variable de usuario. Ahora hemos agarrado estos dos enlaces de navegación con condición, que es si el usuario no está disponible, entonces por lo que este enlaces. Ahora tenemos que pasar por aquí, reaccionar embarazada. Y después de eso, si un usuario está disponible, mostraremos dos enlaces más, perfil y cierre sesión. Por lo que duplico este bloque y la condición de Jane y post link por perfil. Y segundo para los cambios de cierre de sesión y echa un vistazo. Mira, obtenemos nuestro perfil y enlaces de cierre de sesión. Ahora vaya al panel Aplicación y seleccione este token y retírelo. Qué propósito de degustación. Ahora actualiza la página. Obtenemos enlaces de inicio de sesión y registro. 9. Cómo corregir el error de actualización: En este momento, crees que nuestra aplicación está funcionando bien, pero aquí tenemos bug. Déjame mostrarte. Así que abra el formulario de inicio de sesión y el correo electrónico y la contraseña correctos. Ahora haga clic en este botón de inicio de sesión. Ahora para presionar el almacenamiento local C, obtenemos nuestro token. Pero estos vínculos siguen siendo visibles. Porque en el componente app, esta condición si solo se ejecuta una vez. Entonces si refrescamos manualmente la página, entonces obtenemos otros enlaces. Por lo que después de iniciar sesión, tenemos que refrescar automáticamente la página. Es muy sencillo. Así que de vuelta a nuestro componente de inicio de sesión. Y el estado de ánimo es navegar un anuncio aquí, la ubicación del punto de la ventana es igual a. Ahora elimina esta navegación usada. Y también eliminar de importante, guarde esto y copie esta ventana.ubicación y pegada en el componente de registro. Se usa un modo. Navegar y también eliminar, guardar los cambios y echar un vistazo. Ahora de nuevo, token remoto y refrescar la página. Ahora filtra correo electrónico y contraseña. A continuación, haga clic en Iniciar sesión. A ver obtenemos nuestros enlaces sin refrescar manualmente. Perfecto. 10. Implementación de la característica de cierre de sesión: Ahora vamos a crear componentes. Lo que estas dos páginas en carpeta de componentes. Creo una nueva carpeta llamada profile, y dentro de ella creo un nuevo archivo, profile dot js. Ahora escribe AFC, React repetitivo, y paso aquí H1. Este es componente de perfil. Guárdalo. Y vamos a crear una nueva carpeta llamada logout. Y dentro de él, crear un nuevo archivo, cerrar sesión dot js. Y de nuevo, escribe nuestra boilerplate de la AFC y guarda esto. Ahora ve al archivo routing dot js. Aquí definimos nuestras rutas. Entonces duplica estas dos líneas y genes pero para perfilar y elemento también perfilar. Y para segunda ruta, cambiamos malo para cerrar sesión. Un elemento también cerrar sesión los cambios y echar un vistazo. ver, conseguimos nuestras rutas. Ahora, primero completemos la función de cerrar sesión. Así que abre el archivo logout dot js. Por lo tanto, cerrar sesión es básicamente eliminar el token del almacenamiento local. Eso es todo. Entonces importé efecto de uso de React. Y aquí creo, uso la función de flecha hacia atrás y matriz vacía porque sólo queremos ejecutar esta vez. Ahora dentro de esto usando almacenamiento local, dot remove item, token. Y después de eso, vamos a redirigir a la base. Entonces a la derecha, la ubicación del punto de ventana es igual a 2s Vamos a guardarlo y echar un vistazo. Ahora haga clic en cerrar sesión y vea que hemos desconectado con éxito. Ahora vamos a iniciar sesión de nuevo. Y mira, funciona bien. 11. Cómo hacer una solicitud de API segura con Token: Ahora en esta página de perfil, queremos mostrar la información del usuario que tenemos solicitud GET usuario. Vamos a abrir el archivo de perfil dot js. Y primero importamos el efecto de uso. Y después de eso, importamos STDP de Vigo a Fuller's up utils menos STDP. Ahora en componente, declaramos una función llamada get user profile, arrow function. Y dentro de ella, parcheamos datos, ¿verdad? Http punto obtener slash usuario. Ahora agreguemos un peso. Y para eso hay que añadir un C. Genial. Ahora vamos a almacenar esto en variable llamada respuesta y consultar la respuesta. Ahora vamos a crear un objeto de usuario. Y dentro de ella llamamos a esta función. Guarde los cambios y el color. Ir a la página de perfil y ver que obtenemos error, que es Unauthorized debido a nuestro middleware impar, que fueron declarados en backend. Sólo ese usuario puede acceder a esta información que envía token en encabezado. Entonces vamos a resolver este tema. Entonces para eso, creamos nuevo archivo en tus cuentos llamado set o token dot js. Ahora crea una función llamada set o token. Y bares aquí, token. Ahora dentro de él, escribimos si Dogan está disponible, entonces pasamos este token en encabezado mediante el uso de x. uso. Tan importante desde nuestra pila STDP, este es un paso muy importante. Aquí mismo. X es igual a punto por defecto encabezado punto punto común. En corchete. Pasamos nuestro nombre de cabecera, que es x, o token, que establecemos en nuestro back-end, es igual a token. Ahora en as, lee, escribe, elimina, y luego copia y pega este comando. Y vamos a exportar por defecto, set o token. Ahora vamos a llamar a este componente de aplicación de función. Hasta ahora conjunto más importante o token de utils, menos octágono conjunto. Ahora, después de almacenar este token en token JWT y pasar nuestro token, que es JWT. Guarde los cambios y actualice la página de perfil. A ver obtenemos datos de perfil. Entonces así es como puedes pasar token en encabezado. Ahora no necesitas escribir encabezado para todas las solicitudes. Este conjunto o token hará eso por ti. 12. Crear un componente de ruta privada: Ahora vamos a llevar más adelante esta aplicación. Porque aquí encontré un bicho. Así que vamos a cerrar sesión y en la URL, añadir perfil de slash y presionar Enter. Ver. Aquí obtenemos el componente de perfil que solo es accesible por usuario autenticado. A pesar de que pueden obtener cualquier dato debido a nuestra API de seguridad, pero no es una buena práctica. Entonces si usuario sin login, lo hago, entro en el espacio. Redirigiremos al usuario a la página de inicio de sesión. Así que vamos a crear un nuevo archivo en la carpeta dudosa llamada ruta privada. Ahora bien, RFC quad repetitivo y reescrito aquí. Si el usuario está disponible, salida ventral, que nos ayudará a mostrar un componente infantil. Te lo mostraré en tan sólo un segundo. Si el usuario no está disponible, entonces navegue para slash login. Asegúrese de importar outlet y navegar desde React router dom. Obtenemos usuario de utilería. Así que de vuelta al componente App. Y en este componente de enrutamiento, pasamos igual de usuario a usuario. Y en el componente de enrutamiento, estructura 3D de usuario. Ahora en el router React versión seis, podemos definir rutas privadas muy fácilmente. Esta ruta privada no es más que una función que redirigirá al usuario si no han iniciado sesión. Así que ruta correcta y no pase ruta directamente elemento y pase aquí componente de ruta privada con usuario igual a usuario y ruta más cercana. Ahora, entre esta ruta, podemos pasar todas nuestras rutas privadas. Entonces vamos a mover este perfil y cerrar sesión lechada. Entonces esto básicamente significa que cada vez que alguien intentó enrutar cualquiera de estas rutas, entonces estas función de ruta privada correrán post, guardarán los cambios, y echarán un vistazo. Ver, nos movemos directamente a la página de inicio de sesión. 13. Cómo arreglar los pequeños errores: Ahora ingresa con tu información en los tipos de URL menos login y pulsa Enter. ver, obtenemos este formulario de inicio de sesión. Entonces vamos a arreglar esto muy rápido. Aquí. ¿ Quién compra este componente de inicio de sesión de usuario? Ahora abre este componente de inicio de sesión y destructor props usuario. Después de eso, escribimos aquí usar efecto y función de error con una matriz vacía. Y dentro de esto, comprobamos si el usuario está disponible. Después enviamos al usuario un paso atrás. Vamos a importar usuario de React y el uso importante navegue desde React, router dom. Y después de que declares, agregamos lead navigate equals para usar navigate. Ahora mismo aquí, navega y pasa menos uno, lo que significa un paso atrás. Funciona como botón Atrás en el navegador. Si escribimos menos dos, entonces irá dos pasos atrás. Guarda esto, y echa un vistazo. Ahora teclea aquí, es menos iniciar sesión y entrar. ver, redirigimos a la página principal. Ahora copiemos esto desde el archivo de inicio de sesión dot js y peguémoslo dentro del componente de registro. Ahora vuelve a copiar estas líneas de entrada y pegarla en la parte superior. Ahora vuelve al componente de enrutamiento y pasa igual a usuario. Mientras que este tercer componente y en el componente de registro, usuario de la estructura 3D en cae los cambios y echa un vistazo. ver, cuando intentamos golpear la página Registrar, redirigimos un paso atrás. Así que felicidades, has creado con éxito la autenticación de usuarios usando JWT, que es la forma más utilizada para aplicaciones de usuario auténticas. Espero que aprendas mucho de este tutorial. Si tienes algunas dudas, me lo vas a preguntar en el apartado de comentarios. Nos vemos en el siguiente video. tengas un buen día.