O curso definitivo de JWT [SingUp, login, logout com MERN Stack]

1. introdução: Bem-vindo ao curso definitivo de JWT. Nesta aula, vamos aprender JWT em linguagem fácil e simples. Depois de concluir este curso, você terá um entendimento adequado dos tokens da Web JSON. Então, primeiro de tudo, vamos ver o que é JWT, por que precisamos dele. Depois disso, começaremos com a parte de back-end do JWT, que é como gerar tokens, como verificar tokens e implementar a API de segurança apenas para usuários conectados. Depois disso, passaremos para a parte frontal na qual armazenamos o Dogan em nosso navegador. Implementando recursos de login e logout de inscrição, enviando token no cabeçalho e criando componente para rota privada. Na seção Projeto, você obterá todos os recursos para esta classe. Estou muito animado com esta aula e espero que você também esteja. Vamos começar. 2. O que é JWT e por que precisamos?: Portanto, JWT significa token da web JSON, que é usado para transferir informações com segurança entre duas partes, como back-end e front-end. Mas o principal motivo para usar o JWT é autenticar o usuário usando seu token. Vamos entender isso com o exemplo. Aqui dificilmente é um login com suas informações de conta, e-mail e senha. Agora nosso servidor mais j, a inflamação. E se for verdade, servidor retorna o ID do usuário como resposta e o armazena no cidadão ou no cookie. Agora, sempre que ele envia a solicitação algumas informações seguras, digamos todas as suas informações bancárias. postagem do servidor solicitou o ID do usuário. E se ele tiver ID de usuário, o servidor enviará as informações seguras. Mas aqui está um grande problema, esse não é o nosso cookie no qual armazenamos nosso ID de usuário. Ele pode ser facilmente modificado no navegador. Digamos que eu acabei de alterar esse ID de usuário para outro ID de usuário. Em seguida, obtemos as informações sobre esse usuário. Portanto, essa abordagem não é segura. Agora, para resolver esse problema, introduzimos o token da web JSON. Agora dificilmente mais faça login com seu e-mail e senha. Agora nosso servidor fez uma pausa para verificar a inflamação. E se for verdade, servidor retornará o token exclusivo criptografado e o armazenará no armazenamento local. Agora, o melhor desse token é que ele é feito com detalhes do usuário e uma chave secreta que definimos no servidor. Portanto, sempre que dificilmente envia uma solicitação para as informações atuais da política, postagem do servidor solicita o token JWT, verifique-a usando nossa chave secreta. Se for verificado, então e depois o serviço e as informações do buscador. E se alterarmos alguma coisa nas informações do usuário, nosso token mudará. É por isso que usamos JWT, autenticação de usuário. Sei que você tem muitas perguntas relacionadas ao token da web JSON, mas assista a este tutorial completo, ele esclarecerá suas dúvidas. Neste tutorial, vou usar o NodeJS como back-end e o React JS para o front-end. Mas você ainda pode segui-las , independentemente da linguagem de programação que você usa. 3. Começando com o backend: Aqui eu crio um projeto simples em Node.JS em que post eu conecto este servidor de nó com meu banco de dados localhost MongoDB e ouço esse servidor no localhost por milhares. A propósito, você também pode baixar o código inicial. Vamos primeiro instalar todas as dependências para este projeto. Então abra o terminal e escreva npm install. Deixe-o rodar em segundo plano. Agora, na pasta de modelos, criei um usuário modelo com apenas três pílulas, nome, e-mail e senha. Agora, na pasta de rotas, eu defino todas as rotas. A rota do ônibus é para registro do usuário neste arquivo users.js. Então, aqui, primeiro, obtemos todos os dados do corpo do ponto de solicitação e os desestruturamos. Em seguida, verificamos o usuário existente. E depois disso, salvaremos as informações do usuário no banco de dados e as informações do usuário Sandy pois ele responde a uma rota bastante simples. Em seguida, no arquivo server.js, importo esse usuário e defino esse teclado de rota como APIs menos usuário. Então abra dez minutos e escreva para o servidor Norman. Isso atualizará continuamente o servidor no Jane's. Ótimo, nós conectamos o banco de dados. Então, vamos provar com o carteiro. Agora eu passo nossa rota aqui e seleciono linha e Jason. Agora, aqui eu passo o objeto de dados e clico em Enviar para ver os dados do usuário. Agora, se B clicar novamente no botão Enviar, obteremos o usuário já existente. Essa é a pequena introdução para quem está assistindo o tempo de pausa do nó apenas para entender. Da mesma forma, temos outra rota chamada ímpar para login. Deixe-me mostrar-lhe diretamente no Postman. Então eu passo o e-mail e a senha corretos. Em seguida, clique em Enviar. Veja, obtemos o usuário atual. Mas se passarmos a senha errada, teremos um erro. Agora, existem três tarefas principais para o JWT no back-end. Assisti. Um deles é gerar token no registro. Em segundo lugar, gerar token no login. E por último, quando o usuário solicita informações de segurança, temos que verificar o token. Vamos começar com a tarefa número um. 4. Gerando o Token JWT no registro e login: Então abra o terminal e adicione um novo terminal e escreva npm I, JSON Web Token e pressione Enter. Agora o usuário está fora. No topo, declaro que o JWT é igual a dois tokens da web necessários e decentes. Agora, depois de armazenar os dados no registro, raciocine o token JWT ou o sinal de ponto JWT. Agora, o primeiro argumento são nossos dados que queremos passar com esse token. Então, eu crio uma nova variável chamada dados JWT porque para sublinhar ID usuário ponto sublinhado id nome da vírgula, user.name. Agora passe esses dados do JWT aqui. Agora, o segundo parâmetro é nossa chave secreta JWT. Assim, podemos passar aqui qualquer string como código abençoe você, ou o que quer que seja. Essa chave secreta é muito importante para autenticação. Nesse caso, não está seguro. Portanto, declararemos nossa chave secreta no arquivo ponto ENV aqui. Jwt secret é igual a qualquer coisa como 123 code blast ou algo que não vai adivinhar facilmente. Como se você estivesse criando o aplicativo Zomato, chave secreta é como se o Zwicky fosse o melhor. Agora salve-o e volte para nossa rota de usuário. Por aqui, adicionamos o ponto processado ENV, segredo JWT. Com esse processo ponto ENV, podemos acessar a variável desse arquivo ENV. Agora, se você quiser expirar o token em algum tempo, também podemos definir isso. Então, eu quero expirar esse token em horas. Então, se um usuário compra esse token depois de duas horas, ele como fazer login novamente para obter um novo token, certo? No objeto expira em e entre aspas duplas. Você pode escrever o tempo. Se você quiser exportá-lo em um dia, passe 1D. Mas eu passo aqui para molhar ou duas horas. Mais uma vez, dizer isso é opcional. Agora armazene isso em uma variável chamada token na resposta, envie token, salve as alterações. Agora, nos carteiros, criamos um novo código de usuário para ler gmail.com e clicar em Enviar. Veja, obtemos esse token criptografado. Agora copie esse token e cabeçalho para o JWT.io. Este é o site oficial da JWT. Você pode ler aqui a documentação. Agora clique neste depurador. Sim, podemos decodificar nosso token. Agora vamos entender o que dentro desse token baseou nosso token aqui. Agora, todos os tokens divididos em três partes. A primeira parte é sobre o cabeçalho, que está na cor vermelha. A segunda parte é sobre a carga útil, que está em roxo. E a última e mais importante parte é a assinatura, que é na cor azul. Agora, esse cabeçalho contém o algoritmo e o tipo de token, o que é muito comum. Não se concentre nisso. Agora, essa carga contém os dados que queremos passar para esse token. No nosso caso, passamos ID e nome. Veja, aqui temos nossos dados. Assim, podemos exibir esses dados em nosso front-end sem solicitações de nova API. E temos mais dados, o que significa emitido no valor é o tempo em que nosso token foi gerado. E EXP é nosso tempo de exploração. Agora a última parte, assinatura, que é gerada com base em nosso cabeçalho, esses dados de carga útil e chave secreta, que só está disponível no servidor. Portanto, isso impedirá que os usuários obtenham seu próprio Dogan e o modifiquem com ID para fingir ser outra pessoa. Porque se você modificar qualquer coisa nessa carga ou cabeçalho, a assinatura irá regenerá-lo. Não há chance de o usuário fazer algo antiético. É por isso que o JWT é tão popular. Então, criamos com sucesso nosso registro JSON Web Token Board. Agora vamos fazer o mesmo para fazer o login. Então copie essas três linhas e vá para o arquivo ahd dot js e cole-o aqui. E, na parte superior, declare novamente o JWT igual para exigir o JSON Web Token e salve-o. Agora no login, passe alto os dados corretos e envie-os. Veja, nós recebemos o token. Concluímos com sucesso nossa segunda tarefa ou back-end. 5. Como verificar o token na rota segura: Agora, a última tarefa, que é locais ou solicitar rota segura, o que significa que os dados só podem ser acessados por usuários conectados. Em seguida, temos que fazer uma pausa para verificar o token da Web JSON. E se for válido, retornamos dados. Então, no arquivo users.js, adicionamos uma nova API, obtendo as informações atuais do usuário logadas, que serão exibidas no sutiã palpate. Então, o roteador certo obtém o caminho Les Paul e adiciona uma função com a resposta da solicitação. Agora, precisamos criar nosso middleware no qual verificamos o token em cada rota segura. Então, crie uma nova pasta chamada middleware. E dentro dele, criamos um novo arquivo chamado ab.js. Ótimo. Agora, aqui primeiro definimos a função e adicionamos module.exports ou exportamos essa função. Agora você deve saber que nossa função de middleware tem três parâmetros, solicitação, resposta e o próximo. Agora, não vamos nos preocupar com isso. Agora, dentro disso, primeiro passamos o token pelo qual você passa pelo cabeçalho. Então solicite o cabeçalho e passe aqui o nome do cabeçalho, passo x ou token, que é o nome comumente usado. Você pode passar o que quiser para armazenar isso na variável token. Depois disso, verificaremos se o token não está disponível. Em seguida, retorne o status do ponto de resposta para 01, Dotson, e baixo, acesso negado. Dogan não foi encontrado. E se o token estiver disponível, nós o verificamos. Portanto, no topo, redeclare JWT igual a exigir o token da web JSON. Agora, aqui escrevemos JWT dot verify. Agora, o primeiro parâmetro é nosso token, que queremos verificar. O segundo parâmetro é nossa chave secreta JWT. Então, certo, processo ponto ENV, segredo JWT. Agora, isso nos dará id e nome, que passamos mais cedo. Então, vamos armazenar isso na variável user, e passamos esses valores em request dot user igual a user. Depois disso, chamaremos a próxima função. Então, ele executará a API. Agora, se esse token for válido, esse código nos dará um erro. soviético tenta pegar o bloco para isso. Agora, mova isso para dentro do bloco try. Agora, neste bloco catch, escrevemos o status do ponto de resposta, 400. Os pontos enviam um token inválido e o salvam. Agora, de volta à rota users.js. E primeiro importamos estranho. Portanto, escreva const ímpar igual a dois, middleware de barra dupla, menos ímpar. Agora passamos esse middleware estranho aqui. Então, quando alguém chama essa API, esse middleware estranho será executado. E se o token for verificado, então, e então, essa função será executada. Agora, imediatamente, o usuário de TI encontra por ID e solicitação de senha dot user dot underscore ID, que declaramos no middleware de outono, e armazená-lo em uma variável chamada profile. Em seguida, pontos de resposta e perfil. Aqui nós adicionamos um peso. Portanto, temos que escrever aqui assíncrono, Salve-o. Agora vamos testar essa API privada. Então, de volta ao Postman e adicione uma nova solicitação e passe aqui http dois pontos barra dupla host local, dois pontos Python barra api barra usuário, e clique em Enviar. Veja, recebemos a mensagem de erro de acesso negado porque não passamos o token no cabeçalho. Então vá para a seção Cabeçalho. E aqui está x token ímpar, que passamos no middleware de outono. E aqui passamos nosso token. Então eu copio esse token do login, gosto e colo aqui. Agora clique em enviar e obteremos o perfil do usuário. Agora, se alterarmos alguma coisa nesse token e enviarmos, obteremos um token inválido. Portanto, nossa parte de back-end está concluída aqui. Minimize esse servidor por meio pontuação, pois precisamos continuar executando esse servidor. Agora veremos como lidar com o JWT no React. 6. Começando a autenticação do Frontend: Então, aqui eu abri a pasta do cliente em outro VS Code. Em primeiro lugar, instalaremos todas as dependências. Então abra e escreva npm install e deixe-o rodar em segundo plano. Deixe-me dar uma visão geral rápida desse aplicativo React. Então, neste componente de aplicativo, eu crio uma barra agora, e dentro do caracol ruim, eu crio três links agora. E para roteamento, eu crio esse componente de roteamento no qual eu defino todas as rotas como home, login e register, simples assim. Vamos executar esse aplicativo. Então abra um terminal e escreva npm start e pressione Enter C. Este é o nosso componente doméstico. Depois disso, temos o formulário de login na página de login. Portanto, se escrevermos e-mail e senha e enviarmos o formulário, obteremos valores no console. Semelhante a isso, temos o formulário de inscrição. Preenchemos o formulário e clicamos no botão Registrar. Então obtemos valores no console, assim por diante, JWT, quando você usa um resistor, enviamos token do back-end, certo? Então, depois disso, armazenamos esse token no armazenamento local do navegador e passamos esse token quando fazemos qualquer solicitação de API segura. Em nosso exemplo, nossa API de perfil. Tão semelhante ao back-end, temos três tarefas para front-end. A primeira é que armazenamos o token no resistor. Em segundo lugar, armazenamos o token no Login. E por último, dissemos “ token” para o nosso cabeçalho. Assim, podemos fazer uma solicitação segura de API. 7. Armazenando token no registro e login: Então abra o terminal e adicione um novo terminal e escreva npm I SEOs e pressione Enter. Se você não conhece SCOs, seu vídeo guia injetar meu XES. Agora eu crio uma nova pasta chamada utils for utilities e crio um novo arquivo com o nome STDP ab.js. Agora, neste arquivo, antes de tudo, eu importo de zeros. E depois disso, eu crio uma variável chamada instância igual a XES dot create. Agora passe o objeto e, dentro dele, reescreva o URL base. Aqui. Podemos passar nosso URL de base de back-end, que é http dois pontos barra dupla host local dois pontos por milhares menos API. E, no final, exporte a instância padrão. Então, basicamente, criamos um atalho para fazer uma solicitação de API. Portanto, não precisamos escrever sempre um URL completo. Se fizermos uma solicitação ou localhost colon pi mil barra api slash user, então temos que apenas escrever usuário de barra. Agora vá para o registro da pasta do componente e abra este arquivo dot js do registro. Então, este é um formulário de inscrição. Agora, na função de envio, chamaremos nossa API de registro. Então, no topo, primeiro importação de STDP de, vamos até os detentores e adicionamos detalhes como PIB. Agora eu removo esse console aqui, http ponto post. Agora, o primeiro parâmetro é o caminho da nossa API, que é menos usuário. E o segundo parâmetro são os detalhes do usuário. Agora, essa declaração retorna uma promessa. Vamos lidar com isso com async await. Eu escrevo aqui de oito, e aqui passamos AC. Agora vamos armazenar esse valor em uma variável chamada resposta. E consola essa resposta, salve as alterações e dê uma olhada, vá para resistores e cole e preencha os dados com um e-mail exclusivo. E clique no botão Registrar. Veja, obtemos esse objeto de resposta. Então, nesses dados, obtemos nosso token. Vamos distrair essa resposta e obter essa propriedade de dados. Agora, vamos fazer nosso token em nosso armazenamento local. Portanto, nosso navegador tem seu próprio armazenamento pequeno. Então, escrevemos armazenamento local, item de conjunto de pontos. Agora, a variável post é o nome desse campo, que é token. E segundo, passamos dados, que são tokens reais. E depois disso, moveremos o usuário para a página inicial. Para navegação. Usamos o roteador React dom. No topo. Eu uso importante navegar a partir do roteador React dom, termine aqui. Deixe navegar igual a usar a navegação. E depois disso, escrevemos navigate. E dentro dele, passamos pelo nosso caminho, que é menos participantes de vendas, e damos uma olhada. Agora passe um e-mail diferente e clique no botão Registrar. Veja que redirecionamos para a página inicial. Deixe-me mostrar onde armazenamos nosso token. Então vá para o painel de aplicativos aqui. Agora clique em histórias locais e selecione seu URL da web. Veja, restaurei nosso token aqui. Agora, de volta aos registros e palm e compra os mesmos dados e clique em Registrar. No console, obtemos erro. Então, de volta ao nosso aplicativo React. E adicionamos o bloco try-catch para lidar com essa discórdia do modo de erro neste bloco try, bloco de engajamento. Simplesmente consolaremos esta era, salvaremos as alterações e daremos uma olhada. Clique no botão Registrar. Veja, nós pegamos o objeto somador. Agora, nesta resposta de erro, obtemos nossos dados, que enviamos do usuário back-end já existem. Então, escrevemos aqui se a resposta do ponto do somador estiver disponível e, em seguida, o adder dot response.status for igual a 400. Em seguida, defina error, adder dot response.data, que é nossa variável de estado. Porque não queremos mostrar nenhum outro somador que não enviamos do backend. E na parte inferior, eu já adiciono a condição, que é se o somador estiver disponível, imprima esse erro, mude e dê uma olhada. Agora clico no botão Registrar e obtemos essa era agora semelhante à nossa página de login. Então eu copio este bloco try and catch e abro a página de login dot js. E na função de envio do identificador, cole-o. Agora copie isso para importações e cole-o no componente de login. Agora copie esta última linha de navegação e cole-a. Então agora aqui nós mudamos o caminho do usuário, fazemos estranho e compramos esses dados do formulário, que também são detalhes do usuário. Os participantes, e dê uma olhada. Agora preencha este formulário com as informações erradas e veja que recebemos nosso somador agora com as informações corretas. E z componente realmente direto para casa. E você também pode verificar os tokens armazenados no armazenamento local. 8. Obtendo informações do usuário do token: Agora, não quero mostrar este link de login e registro se um usuário já estiver logado. Então, voltando para Add Component, criamos uma variável de estado chamada usuário e valor inicial como null. E no topo, import o usou do React. Agora, a lógica é quando a data desses usuários é nula, o que significa que o usuário não está logado. O usuário está disponível e, em seguida, o usuário está conectado. A questão é: como podemos obter os dados atuais do usuário. Lembre-se de que passamos nossos dados de usuário para nossa seção de carga útil do JWT. Então, usamos esses dados aqui para autenticar. Agora adicionamos aqui a condição. Se no armazenamento local tivermos token, obteremos dados do token, certo? Se o token de ponto de armazenamento local estiver disponível, altere o estado do usuário. Agora, como podemos decodificar nosso token e obter esses dados para que tenhamos uma biblioteca chamada decodificação JWT. Então abra o terminal e escreva o código npm I JWT dash d e pressione Enter e feche este terminal. Agora, aqui importamos a decodificação JWT da decoração JWT. Agora, dentro deste IV, obtemos o primeiro token do armazenamento local, ponto get item e token. E agora usamos a decoração JWT. E dentro disso, passamos esse token JWT. Agora armazene isso no usuário de registro variável e defina o usuário como usuário de registro. Agora, vamos consolar essa variável de estado do usuário. Salve as alterações, dê uma olhada e obteremos um erro, que é por causa do loop infinito. Deixe-me explicar aqui. Primeiro, verificamos se há token e dissemos dados do usuário para essa variável de usuário, que cria em loop finito. Portanto, precisamos mover esse código fora desse componente do aplicativo. Agora remova essa função de usuário definida e direcione o caminho desse valor de usuário de log como valor inicial. Agora, antes dessa condição if, redefina essa variável de usuário de log porque se o token não estiver disponível, não poderemos acessar esse log é uma variável e remover essa constante também. Agora salve as alterações e dê uma olhada. Veja, obtemos nossos detalhes de usuário. Agora, usando essa variável de usuário, exibiremos links privados e link de login e registro de dias de altura. Então, passe esse usuário como prompts neste componente Navbar. Agora em agora por componente, estrutura 3D props e get user variable. Agora nós pegamos esses dois links de navegação com condição, que é se o usuário não estiver disponível, então este link. Agora temos que passar por aqui, reagir grávida. E depois disso, se um usuário estiver disponível, mostraremos mais dois links, perfil e logout. Então eu duplico esse bloqueio e condição de Jane e posto o link por perfil. E segundo, para alterações de logout e dê uma olhada. Veja, obtemos nossos links de perfil e logout. Agora vá para o painel Aplicativo selecione esse token e remova-o. Que propósito de degustação. Agora atualize a página. Recebemos links de login e registro. 9. Corrigindo o bug de atualização: No momento, você acha que nosso aplicativo está funcionando bem, mas temos um bug aqui. Deixe-me mostrar a você. Então abra o formulário de login e o e-mail e a senha corretos. Agora clique neste botão de login. Agora, para pressionar o armazenamento local C, obtemos nosso token. Mas esses links ainda estão visíveis. Porque no componente do aplicativo, essa condição if só é executada uma vez. Portanto, se atualizarmos manualmente a página, obteremos outros links. Então, após o login, temos que atualizar automaticamente a página. É muito simples. Então, de volta ao nosso componente de login. E o clima é navegar em um anúncio aqui, localização do ponto da janela é igual a. Agora remova esta navegação usada. E também remova do importante, salve isso e copie este window.location e cole no componente de registro. Um modo é usado. Navegue e também remova, salve as alterações e dê uma olhada. Agora, novamente, token remoto e atualize a página. Agora filtre o e-mail e a senha. Em seguida, clique em Login. Veja que obtemos nossos links sem atualizar manualmente. Perfeito. 10. Implementando o recurso de logout: Agora vamos criar componentes. O que essas duas páginas na pasta de componentes. Eu crio uma nova pasta chamada profile, e dentro dela crio um novo arquivo, profile dot js. Agora escreva AFC, React boilerplate, e eu passo aqui H1. Este é o componente do perfil. Salve isso. E vamos criar uma nova pasta chamada logout. E dentro dele, crie um novo arquivo, faça logout dot js. E, novamente, escreva nosso boilerplate AFC e salve isso. Agora vá para o arquivo de roteamento dot js. Aqui definimos nossas rotas. Então, duplique essas duas linhas e genes, mas para o perfil e o elemento também o perfil. E para a segunda rota, mudamos mal para sair. Um elemento também faz logout das alterações e dá uma olhada. Veja, nós pegamos nossas rotas. Agora, vamos primeiro concluir o recurso de logout. Então abra o arquivo logout dot js. Portanto, o logout é basicamente remover o token do armazenamento local. É isso aí. Então eu importei o efeito de uso do React. E aqui eu crio, uso a função de seta para trás e array vazio porque só queremos executar isso uma vez. Agora, dentro disso, usando armazenamento local, item de remoção de ponto, token. E depois disso, vamos redirecionar para a base. Então, certo, a localização do ponto da janela é igual a 2s. Vamos salvá-lo e dar uma olhada. Agora clique em logout e veja que saímos com sucesso. Agora vamos fazer login novamente. E veja, funciona bem. 11. Como fazer uma solicitação de API segura com o Token: Agora, nesta página de perfil, queremos exibir as informações do usuário que temos GET request user. Vamos abrir o arquivo dot js do perfil. E primeiro importamos o efeito de uso. E depois disso, importamos STDP de Vigo para os utilitários up do Fuller menos STDP. Agora, no componente, declaramos uma função chamada get user profile, arrow function. E dentro dele, corrigimos os dados, certo? Http dot get slash usuário. Agora vamos adicionar um peso. E para isso temos que adicionar um C. Ótimo. Agora vamos armazenar isso em uma variável chamada resposta e consultar a resposta. Agora vamos criar um objeto de usuário. E dentro dela chamamos essa função. Salve as alterações e a cor. Vá para a página de perfil e veja que recebemos um erro, que não é autorizado devido ao nosso middleware estranho, que foi declarado no back-end. Somente esse usuário pode acessar essas informações que envia o token no cabeçalho. Então, vamos resolver esse problema. Então, para isso, criamos um novo arquivo em seus contos chamado set ou token dot js. Agora crie uma função chamada set ou token. E bares aqui, token. Agora, dentro dele, escrevemos se o Dogan estiver disponível, então passamos esse token no cabeçalho usando x. Use. Tão importante da nossa pilha de STDP, esse é um passo muito importante. Bem aqui. X é igual a dot defaults dot header dot common. Entre colchetes. Passamos nosso nome de cabeçalho, que é x, ou token, que definimos em nosso back-end, igual a token. Agora em como, leia, escreva, exclua e, em seguida, copie e cole este comando. E vamos exportar padrão, conjunto ou token. Agora vamos chamar essa função de componente de aplicativo. Até agora, o conjunto ou token mais importante de utils, menos octógono definido. Agora, depois de armazenarmos esse token no token JWT e passarmos nosso token, que é o JWT. Salve as alterações e atualize a página de perfil. Veja que obtemos dados do perfil. Então é assim que você pode passar o token no cabeçalho. Agora você não precisa escrever cabeçalho para todas as solicitações. Esse conjunto ou token fará isso por você. 12. Criando um componente de rota privada: Agora vamos fazer esse aplicativo com mais antecedência. Porque aqui eu encontrei um bug. Então, vamos sair e no URL, adicionar perfil de barra e pressionar Enter. Veja. Aqui, obtemos o componente de perfil que só pode ser acessado pelo usuário autenticado. Embora eles possam obter quaisquer dados por causa da nossa API de segurança , isso não é uma boa prática. Então, se usuário sem login, eu faço, eu entro no espaço. Vamos redirecionar o usuário para a página de login. Então, vamos criar um novo arquivo em pasta duvidosa chamada rota privada. Agora certo, RFC quad boilerplate e reescrito aqui. Se o usuário estiver disponível, saída ventral, o que nos ajudará a exibir um componente filho. Eu vou te mostrar isso em apenas um segundo. Se o usuário não estiver disponível, navegue até barra de login. Certifique-se de importar o outlet e navegar a partir do React router dom. Recebemos usuários de adereços. Então, de volta ao componente App. E nesse componente de roteamento, passamos usuário igual a usuário. E no componente de roteamento, usuário de estrutura 3D. Agora, na versão seis do roteador React, podemos definir rotas privadas com muita facilidade. Essa rota privada nada mais é apenas uma função que redirecionará usuário se ele não tiver feito login. Então, rota certa e não passe o caminho diretamente pelo elemento e passe aqui componente de rota privada com usuário igual ao usuário e rota mais próxima. Agora, entre essa rota, podemos passar por todas as nossas rotas privadas. Então, vamos mover esse perfil e fazer logout grout. Então, isso basicamente significa que sempre que alguém tentou rotear qualquer uma dessas rotas, função de rota privada executará post, salvará as alterações e dará uma olhada. Veja, passamos diretamente para a página de login. 13. Como corrigir os pequenos insetos: Agora faça login com suas informações nos tipos de URL menos login e pressione Enter. Veja, recebemos este formulário de login. Então, vamos consertar isso bem rápido. Aqui. Quem compra esse componente de login de usuário? Agora abra este componente de login e usuário de adereços destruidores. Depois disso, escrevemos aqui usar função de efeito e erro com uma matriz vazia. E dentro disso, verificamos se o usuário está disponível. Em seguida, enviamos ao usuário um passo para trás. Vamos importar o usuário do React e o uso importante navegar a partir do React, router dom. E depois que você declara, adicionamos lead navigate equals para usar navigate. Agora bem aqui, navegue e passe menos um, o que significa um passo para trás. Funciona como o botão Voltar no navegador. Se escrevermos menos dois, ele dará dois passos para trás. Guarde isso e dê uma olhada. Agora digite aqui, é menos login e entra. Veja, nós redirecionamos para a página inicial. Agora vamos copiar isso do arquivo de login dot js e colá-lo dentro do componente de registro. Agora, copie novamente essas linhas de entrada e cole-as na parte superior. Agora volte para o componente de roteamento e passe o usuário igual ao usuário. Enquanto este terceiro componente e no componente de registro, usuário da estrutura 3D descarta as alterações e dá uma olhada. Veja, quando tentamos acessar a página Registrar, redirecionamos um passo para trás. Então, parabéns, você criou com sucesso a autenticação do usuário usando o JWT, que é a forma mais usada para aplicativos de usuário autênticos. Espero que você aprenda muito com este tutorial. Se você tiver alguma dúvida, você vai me perguntar na seção de comentários. Vejo você no próximo vídeo. Tenha um bom dia.