{"id":2158,"date":"2026-07-12T10:46:06","date_gmt":"2026-07-12T13:46:06","guid":{"rendered":"https:\/\/desvendandoocodigo.com.br\/?p=2158"},"modified":"2026-07-12T10:50:05","modified_gmt":"2026-07-12T13:50:05","slug":"como-os-sites-continuam-logados-depois-do-f5-entenda-session-e-cookies-na-pratica","status":"publish","type":"post","link":"https:\/\/desvendandoocodigo.com.br\/?p=2158","title":{"rendered":"Como os Sites Continuam Logados Depois do F5? Entenda Session e Cookies na Pr\u00e1tica"},"content":{"rendered":"\n

Voc\u00ea faz login em um sistema, aperta F5<\/strong> e continua autenticado.<\/p>\n\n\n\n

Fecha uma p\u00e1gina, abre outra e ainda permanece logado.<\/p>\n\n\n\n

Mas afinal… como o navegador sabe que \u00e9 voc\u00ea?<\/strong><\/p>\n\n\n\n

Essa \u00e9 uma das d\u00favidas mais comuns entre quem est\u00e1 come\u00e7ando no desenvolvimento web e, ao mesmo tempo, um dos conceitos mais importantes para criar aplica\u00e7\u00f5es modernas.<\/p>\n\n\n\n

Neste artigo vamos entender como funcionam Session<\/strong>, Cookies<\/strong> e a autentica\u00e7\u00e3o entre Front-end e Back-end utilizando JavaScript e Node.js.<\/p>\n\n\n\n

\n\n\n\n

O problema da autentica\u00e7\u00e3o<\/h1>\n\n\n\n

O protocolo HTTP \u00e9 stateless<\/strong>, ou seja, ele n\u00e3o guarda informa\u00e7\u00f5es entre uma requisi\u00e7\u00e3o e outra.<\/p>\n\n\n\n

Imagine o seguinte cen\u00e1rio:<\/p>\n\n\n\n

    \n
  1. Voc\u00ea acessa o site.<\/li>\n\n\n\n
  2. Faz login.<\/li>\n\n\n\n
  3. O servidor valida seu usu\u00e1rio.<\/li>\n\n\n\n
  4. Voc\u00ea abre outra p\u00e1gina.<\/li>\n<\/ol>\n\n\n\n

    Como o servidor sabe que aquela nova requisi\u00e7\u00e3o pertence ao mesmo usu\u00e1rio?<\/p>\n\n\n\n

    Se n\u00e3o existisse algum mecanismo de identifica\u00e7\u00e3o, seria necess\u00e1rio fazer login novamente a cada clique.<\/p>\n\n\n\n

    \u00c9 justamente a\u00ed que entram as Sessions<\/strong> e os Cookies<\/strong>.<\/p>\n\n\n\n

    \n\n\n\n

    O que \u00e9 uma Session?<\/h1>\n\n\n\n

    A Session \u00e9 um espa\u00e7o reservado no servidor para armazenar informa\u00e7\u00f5es tempor\u00e1rias sobre um usu\u00e1rio autenticado.<\/p>\n\n\n\n

    Depois que o login \u00e9 realizado com sucesso, o servidor cria uma sess\u00e3o semelhante a esta:<\/p>\n\n\n\n

    Session:\nUsu\u00e1rio: Marcos\nID: 123\nPermiss\u00e3o: Admin\nLogin: verdadeiro\n<\/code><\/pre>\n\n\n\n
    Essas informa\u00e7\u00f5es ficam armazenadas apenas no servidor.<\/p>\n\n\n\n
    O navegador nunca recebe esses dados diretamente.<\/p>\n\n\n\n
    \n\n\n\n
    O papel do Cookie<\/h1>\n\n\n\n
    Se os dados ficam no servidor, como o navegador encontra a sess\u00e3o correta?<\/p>\n\n\n\n
    A resposta est\u00e1 em um pequeno arquivo chamado Cookie<\/strong>.<\/p>\n\n\n\n
    Ap\u00f3s o login, o servidor envia algo parecido com:<\/p>\n\n\n\n
    connect.sid = x8Aj92Kd93jd82...\n<\/code><\/pre>\n\n\n\n
    Esse valor representa apenas um identificador da sess\u00e3o.<\/p>\n\n\n\n
    Sempre que o navegador faz uma nova requisi\u00e7\u00e3o, ele envia automaticamente esse cookie.<\/p>\n\n\n\n
    O servidor ent\u00e3o procura esse identificador na mem\u00f3ria (ou banco de dados) e recupera a sess\u00e3o correspondente.<\/p>\n\n\n\n
    \n\n\n\n
    O que acontece quando pressionamos F5?<\/h1>\n\n\n\n
    Ao atualizar a p\u00e1gina:<\/p>\n\n\n\n
      \n
    • o navegador envia novamente o cookie;<\/li>\n\n\n\n
    • o servidor encontra a sess\u00e3o;<\/li>\n\n\n\n
    • identifica o usu\u00e1rio;<\/li>\n\n\n\n
    • responde normalmente.<\/li>\n<\/ul>\n\n\n\n
      Por isso voc\u00ea continua autenticado mesmo ap\u00f3s atualizar a p\u00e1gina.<\/p>\n\n\n\n
      \n\n\n\n
      Como funciona o Login na pr\u00e1tica<\/h1>\n\n\n\n
      Durante o projeto desenvolvido no v\u00eddeo, constru\u00edmos um fluxo completo de autentica\u00e7\u00e3o utilizando JavaScript e Node.js.<\/p>\n\n\n\n
      O processo acontece da seguinte maneira:<\/p>\n\n\n\n
        \n
      1. O usu\u00e1rio preenche o formul\u00e1rio.<\/li>\n\n\n\n
      2. O JavaScript captura os dados.<\/li>\n\n\n\n
      3. O Fetch API envia uma requisi\u00e7\u00e3o POST.<\/li>\n\n\n\n
      4. O Node.js valida usu\u00e1rio e senha.<\/li>\n\n\n\n
      5. O servidor cria uma Session.<\/li>\n\n\n\n
      6. O Cookie \u00e9 enviado automaticamente ao navegador.<\/li>\n\n\n\n
      7. O Dashboard \u00e9 liberado.<\/li>\n<\/ol>\n\n\n\n
        Todo esse fluxo acontece em poucos milissegundos.<\/p>\n\n\n\n
        \n\n\n\n
        O Logout<\/h1>\n\n\n\n
        Quando clicamos em Logout, o servidor destr\u00f3i a sess\u00e3o.<\/p>\n\n\n\n
        Na pr\u00f3xima requisi\u00e7\u00e3o, mesmo que o cookie ainda exista, ele deixa de apontar para uma sess\u00e3o v\u00e1lida.<\/p>\n\n\n\n
        O resultado \u00e9 que o usu\u00e1rio precisa fazer login novamente.<\/p>\n\n\n\n
        \n\n\n\n
        Visualizando o Cookie no navegador<\/h1>\n\n\n\n
        Uma das partes mais interessantes do projeto \u00e9 abrir o DevTools<\/strong> e observar exatamente onde o navegador armazena o cookie.<\/p>\n\n\n\n
        Basta acessar:<\/p>\n\n\n\n
        F12\n\nApplication\n\nCookies\n<\/code><\/pre>\n\n\n\n
        Voc\u00ea ver\u00e1 um cookie semelhante a:<\/p>\n\n\n\n
        connect.sid\n<\/code><\/pre>\n\n\n\n
        Esse \u00e9 o identificador utilizado pelo servidor para localizar sua sess\u00e3o.<\/p>\n\n\n\n
        Visualizar esse processo ajuda muito a entender como aplica\u00e7\u00f5es profissionais realizam autentica\u00e7\u00e3o.<\/p>\n\n\n\n
        \n\n\n\n
        Tecnologias utilizadas<\/h1>\n\n\n\n
        Durante o desenvolvimento utilizamos diversos recursos importantes do JavaScript moderno:<\/p>\n\n\n\n
          \n
        • JavaScript<\/li>\n\n\n\n
        • Node.js<\/li>\n\n\n\n
        • Express<\/li>\n\n\n\n
        • Express Session<\/li>\n\n\n\n
        • Fetch API<\/li>\n\n\n\n
        • Async\/Await<\/li>\n\n\n\n
        • JSON<\/li>\n\n\n\n
        • Cookies<\/li>\n\n\n\n
        • Session<\/li>\n\n\n\n
        • DevTools<\/li>\n<\/ul>\n\n\n\n
          Al\u00e9m disso, o projeto trabalha conceitos fundamentais para qualquer desenvolvedor Front-end ou Full Stack.<\/p>\n\n\n\n
          \n\n\n\n
          O que voc\u00ea aprender\u00e1 no v\u00eddeo<\/h1>\n\n\n\n
          Durante a aula voc\u00ea ver\u00e1 na pr\u00e1tica:<\/p>\n\n\n\n
            \n
          • Captura de elementos do HTML<\/li>\n\n\n\n
          • addEventListener<\/li>\n\n\n\n
          • preventDefault()<\/li>\n\n\n\n
          • Fetch API<\/li>\n\n\n\n
          • Async\/Await<\/li>\n\n\n\n
          • Requisi\u00e7\u00f5es POST<\/li>\n\n\n\n
          • JSON.stringify()<\/li>\n\n\n\n
          • Headers HTTP<\/li>\n\n\n\n
          • Integra\u00e7\u00e3o Front-end + Node.js<\/li>\n\n\n\n
          • Dashboard protegido<\/li>\n\n\n\n
          • Logout<\/li>\n\n\n\n
          • Session<\/li>\n\n\n\n
          • Cookies<\/li>\n\n\n\n
          • DevTools<\/li>\n<\/ul>\n\n\n\n
            Tudo explicado passo a passo, sem copiar c\u00f3digo pronto.<\/p>\n\n\n\n
            \n\n\n\n
            Assista ao projeto completo<\/h1>\n\n\n\n
            Se voc\u00ea quer entender definitivamente como os sites mant\u00eam usu\u00e1rios autenticados, acompanhe o projeto completo.<\/p>\n\n\n\n
            \ud83d\udcfa V\u00eddeo editado:<\/strong><\/p>\n\n\n\n
            \n