{"id":2019,"date":"2026-06-21T17:04:32","date_gmt":"2026-06-21T20:04:32","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2019"},"modified":"2026-06-21T17:07:55","modified_gmt":"2026-06-21T20:07:55","slug":"como-sites-sabem-que-voce-esta-logado-jwt-no-node-js","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2019","title":{"rendered":"Como Sites Sabem Que Voc\u00ea Est\u00e1 Logado? JWT no Node.js"},"content":{"rendered":"\n<p>Quando voc\u00ea faz login em um site e consegue navegar por p\u00e1ginas protegidas sem precisar digitar usu\u00e1rio e senha novamente, existe um mecanismo de autentica\u00e7\u00e3o trabalhando nos bastidores.<\/p>\n\n\n\n<p>Uma das formas mais utilizadas em aplica\u00e7\u00f5es modernas \u00e9 o JWT (JSON Web Token).<\/p>\n\n\n\n<p>Neste projeto pr\u00e1tico, vamos construir um sistema completo de autentica\u00e7\u00e3o utilizando Node.js, Express e JavaScript.<\/p>\n\n\n\n<p>V\u00eddeo da aula:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como Sites Sabem Que Voc\u00ea Est\u00e1 Logado? JWT no Node.js\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/KLpH_bZoCAg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que voc\u00ea vai aprender<\/h1>\n\n\n\n<p>Neste projeto vamos desenvolver:<\/p>\n\n\n\n<ul>\n<li>Login de usu\u00e1rio<\/li>\n\n\n\n<li>Gera\u00e7\u00e3o de token JWT<\/li>\n\n\n\n<li>Middleware de autentica\u00e7\u00e3o<\/li>\n\n\n\n<li>Rotas protegidas<\/li>\n\n\n\n<li>Valida\u00e7\u00e3o do token<\/li>\n\n\n\n<li>Logout<\/li>\n\n\n\n<li>Expira\u00e7\u00e3o autom\u00e1tica do token<\/li>\n\n\n\n<li>Integra\u00e7\u00e3o entre Front-End e Back-End<\/li>\n<\/ul>\n\n\n\n<p>As tecnologias utilizadas s\u00e3o:<\/p>\n\n\n\n<ul>\n<li>JavaScript<\/li>\n\n\n\n<li>Node.js<\/li>\n\n\n\n<li>Express<\/li>\n\n\n\n<li>JWT (JSON Web Token)<\/li>\n\n\n\n<li>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>API REST<\/li>\n\n\n\n<li>Fetch API<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">O que \u00e9 JWT?<\/h1>\n\n\n\n<p>JWT significa JSON Web Token.<\/p>\n\n\n\n<p>Ele \u00e9 um token gerado pelo servidor depois que o usu\u00e1rio faz login com sucesso.<\/p>\n\n\n\n<p>Em vez de enviar usu\u00e1rio e senha em todas as requisi\u00e7\u00f5es, o cliente envia esse token, que funciona como uma credencial tempor\u00e1ria.<\/p>\n\n\n\n<p>Assim, o servidor consegue verificar se aquele usu\u00e1rio est\u00e1 autenticado e liberar o acesso \u00e0s rotas protegidas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Como funciona a autentica\u00e7\u00e3o com JWT?<\/h1>\n\n\n\n<p>O fluxo b\u00e1sico \u00e9 o seguinte:<\/p>\n\n\n\n<ol>\n<li>O usu\u00e1rio faz login.<\/li>\n\n\n\n<li>O servidor verifica usu\u00e1rio e senha.<\/li>\n\n\n\n<li>O servidor gera um token JWT.<\/li>\n\n\n\n<li>O Front-End recebe esse token.<\/li>\n\n\n\n<li>O token \u00e9 enviado nas pr\u00f3ximas requisi\u00e7\u00f5es.<\/li>\n\n\n\n<li>O Back-End valida o token.<\/li>\n\n\n\n<li>Se estiver v\u00e1lido, o acesso \u00e9 liberado.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Preparando o Back-End<\/h1>\n\n\n\n<p>No projeto utilizamos:<\/p>\n\n\n\n<ul>\n<li>Express para criar a API.<\/li>\n\n\n\n<li>jsonwebtoken para gerar e validar os tokens.<\/li>\n\n\n\n<li>Um arquivo JSON para armazenar os tokens v\u00e1lidos.<\/li>\n<\/ul>\n\n\n\n<p>Tamb\u00e9m configuramos:<\/p>\n\n\n\n<ul>\n<li>Porta 3000.<\/li>\n\n\n\n<li>Pasta public para os arquivos est\u00e1ticos.<\/li>\n\n\n\n<li>Uma chave secreta utilizada na gera\u00e7\u00e3o do token.<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando fun\u00e7\u00f5es para salvar e remover tokens<\/h1>\n\n\n\n<p>Antes de proteger as rotas, criamos fun\u00e7\u00f5es para:<\/p>\n\n\n\n<ul>\n<li>Ler tokens.<\/li>\n\n\n\n<li>Salvar tokens.<\/li>\n\n\n\n<li>Remover tokens.<\/li>\n<\/ul>\n\n\n\n<p>Isso permite controlar quais tokens ainda s\u00e3o v\u00e1lidos.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando o Middleware de Autentica\u00e7\u00e3o<\/h1>\n\n\n\n<p>O middleware \u00e9 respons\u00e1vel por verificar se o token enviado pelo usu\u00e1rio existe e se \u00e9 v\u00e1lido.<\/p>\n\n\n\n<p>Caso o token n\u00e3o exista ou tenha expirado, o acesso \u00e9 negado.<\/p>\n\n\n\n<p>Caso esteja correto, a requisi\u00e7\u00e3o continua normalmente.<\/p>\n\n\n\n<p>Esse \u00e9 um dos conceitos mais importantes no desenvolvimento de APIs.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Criando a rota de Login<\/h1>\n\n\n\n<p>Quando o usu\u00e1rio envia login e senha, o servidor:<\/p>\n\n\n\n<ul>\n<li>Verifica as credenciais.<\/li>\n\n\n\n<li>Gera um token JWT.<\/li>\n\n\n\n<li>Define um tempo de expira\u00e7\u00e3o.<\/li>\n\n\n\n<li>Retorna o token para o Front-End.<\/li>\n<\/ul>\n\n\n\n<p>Esse token ser\u00e1 utilizado para acessar as rotas protegidas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Protegendo rotas da API<\/h1>\n\n\n\n<p>Criamos uma rota protegida para listar clientes.<\/p>\n\n\n\n<p>Essa rota s\u00f3 pode ser acessada por quem enviar um token v\u00e1lido.<\/p>\n\n\n\n<p>Sem o token, o servidor retorna uma mensagem de erro.<\/p>\n\n\n\n<p>Com o token, os dados s\u00e3o liberados.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Integrando Front-End e Back-End<\/h1>\n\n\n\n<p>No Front-End utilizamos:<\/p>\n\n\n\n<ul>\n<li>HTML<\/li>\n\n\n\n<li>CSS<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Fetch API<\/li>\n<\/ul>\n\n\n\n<p>O usu\u00e1rio faz login, recebe o token e depois consegue consultar as rotas protegidas.<\/p>\n\n\n\n<p>Essa comunica\u00e7\u00e3o entre Front-End e Back-End \u00e9 um conceito fundamental para aplica\u00e7\u00f5es Full Stack.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Implementando o Logout<\/h1>\n\n\n\n<p>Tamb\u00e9m criamos uma rota de logout.<\/p>\n\n\n\n<p>Ao fazer logout, o token \u00e9 removido e deixa de ser v\u00e1lido.<\/p>\n\n\n\n<p>Assim, o usu\u00e1rio perde o acesso \u00e0s rotas protegidas.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Por que aprender JWT?<\/h1>\n\n\n\n<p>JWT \u00e9 utilizado em diversos tipos de aplica\u00e7\u00f5es:<\/p>\n\n\n\n<ul>\n<li>Sistemas administrativos<\/li>\n\n\n\n<li>APIs REST<\/li>\n\n\n\n<li>Aplica\u00e7\u00f5es Full Stack<\/li>\n\n\n\n<li>Sistemas banc\u00e1rios<\/li>\n\n\n\n<li>Plataformas de cursos<\/li>\n\n\n\n<li>Redes sociais<\/li>\n\n\n\n<li>Dashboards e pain\u00e9is administrativos<\/li>\n<\/ul>\n\n\n\n<p>Entender JWT \u00e9 um passo importante para quem deseja trabalhar com desenvolvimento web moderno.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Cap\u00edtulos da Aula<\/h1>\n\n\n\n<p>00:00 Introdu\u00e7\u00e3o ao JWT e estrutura do projeto<\/p>\n\n\n\n<p>02:42 Preparando o backend e gerenciamento de tokens<\/p>\n\n\n\n<p>13:04 Criando o middleware de autentica\u00e7\u00e3o JWT<\/p>\n\n\n\n<p>22:43 Implementando a rota de login<\/p>\n\n\n\n<p>27:43 Testando o JWT e protegendo rotas da API<\/p>\n\n\n\n<p>31:13 Criando o frontend de autentica\u00e7\u00e3o<\/p>\n\n\n\n<p>39:34 Consumindo rota protegida com Fetch API<\/p>\n\n\n\n<p>45:37 Implementando e corrigindo o logout<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h1 class=\"wp-block-heading\">Assista \u00e0 Aula Completa<\/h1>\n\n\n\n<p>V\u00eddeo:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como Sites Sabem Que Voc\u00ea Est\u00e1 Logado? JWT no Node.js\" width=\"960\" height=\"540\" src=\"https:\/\/www.youtube.com\/embed\/KLpH_bZoCAg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Live completa:<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Como o FRONT e o BACK se conectam com JWT (Node.js na pr\u00e1tica)\" width=\"960\" height=\"720\" src=\"https:\/\/www.youtube.com\/embed\/kkrqWUAyqUg?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p><strong>Canal Desvendando o C\u00f3digo<\/strong><\/p>\n\n\n\n<p>Aprenda JavaScript, Node.js, React, Banco de Dados e Desenvolvimento Web de forma pr\u00e1tica, entendendo como a tecnologia funciona por tr\u00e1s dos sistemas reais.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Quando voc\u00ea faz login em um site e consegue navegar por p\u00e1ginas protegidas sem precisar digitar usu\u00e1rio e senha novamente, existe um mecanismo de autentica\u00e7\u00e3o trabalhando nos bastidores. Uma das formas mais utilizadas em aplica\u00e7\u00f5es modernas \u00e9 o JWT (JSON Web Token). Neste projeto pr\u00e1tico, vamos construir um sistema completo de autentica\u00e7\u00e3o utilizando Node.js, Express e JavaScript. V\u00eddeo da aula: O que voc\u00ea vai aprender Neste projeto vamos desenvolver: As tecnologias utilizadas s\u00e3o: O que \u00e9 JWT? JWT significa JSON Web Token. Ele \u00e9 um token gerado pelo servidor depois que o usu\u00e1rio faz login com sucesso. Em vez de enviar usu\u00e1rio e senha em todas as requisi\u00e7\u00f5es, o cliente envia esse token, que funciona como uma credencial tempor\u00e1ria. Assim, o servidor consegue verificar se aquele usu\u00e1rio est\u00e1 autenticado e liberar o acesso \u00e0s rotas protegidas. Como funciona a autentica\u00e7\u00e3o com JWT? O fluxo b\u00e1sico \u00e9 o seguinte: Preparando o Back-End No projeto utilizamos: Tamb\u00e9m configuramos: Criando fun\u00e7\u00f5es para salvar e remover tokens Antes de proteger as rotas, criamos fun\u00e7\u00f5es para: Isso permite controlar quais tokens ainda s\u00e3o v\u00e1lidos. Criando o Middleware de Autentica\u00e7\u00e3o O middleware \u00e9 respons\u00e1vel por verificar se o token enviado pelo usu\u00e1rio existe e se \u00e9 v\u00e1lido. Caso o token n\u00e3o exista ou tenha expirado, o acesso \u00e9 negado. Caso esteja correto, a requisi\u00e7\u00e3o continua normalmente. Esse \u00e9 um dos conceitos mais importantes no desenvolvimento de APIs. Criando a rota de Login Quando o usu\u00e1rio envia login e senha, o servidor: Esse token ser\u00e1 utilizado para acessar as rotas protegidas. Protegendo rotas da API Criamos uma rota protegida para listar clientes. Essa rota s\u00f3 pode ser acessada por quem enviar um token v\u00e1lido. Sem o token, o servidor retorna uma mensagem de erro. Com o token, os dados s\u00e3o liberados. Integrando Front-End e Back-End No Front-End utilizamos: O usu\u00e1rio faz login, recebe o token e depois consegue consultar as rotas protegidas. Essa comunica\u00e7\u00e3o entre Front-End e Back-End \u00e9 um conceito fundamental para aplica\u00e7\u00f5es Full Stack. Implementando o Logout Tamb\u00e9m criamos uma rota de logout. Ao fazer logout, o token \u00e9 removido e deixa de ser v\u00e1lido. Assim, o usu\u00e1rio perde o acesso \u00e0s rotas protegidas. Por que aprender JWT? JWT \u00e9 utilizado em diversos tipos de aplica\u00e7\u00f5es: Entender JWT \u00e9 um passo importante para quem deseja trabalhar com desenvolvimento web moderno. Cap\u00edtulos da Aula 00:00 Introdu\u00e7\u00e3o ao JWT e estrutura do projeto 02:42 Preparando o backend e gerenciamento de tokens 13:04 Criando o middleware de autentica\u00e7\u00e3o JWT 22:43 Implementando a rota de login 27:43 Testando o JWT e protegendo rotas da API 31:13 Criando o frontend de autentica\u00e7\u00e3o 39:34 Consumindo rota protegida com Fetch API 45:37 Implementando e corrigindo o logout Assista \u00e0 Aula Completa V\u00eddeo: Live completa: Canal Desvendando o C\u00f3digo Aprenda JavaScript, Node.js, React, Banco de Dados e Desenvolvimento Web de forma pr\u00e1tica, entendendo como a tecnologia funciona por tr\u00e1s dos sistemas reais.<\/p>\n","protected":false},"author":1,"featured_media":2020,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2019"}],"collection":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2019"}],"version-history":[{"count":3,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions"}],"predecessor-version":[{"id":2024,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/posts\/2019\/revisions\/2024"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=\/wp\/v2\/media\/2020"}],"wp:attachment":[{"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2019"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2019"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/desvendandoocodigo.com.br\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2019"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}