M08

Sistema de Login com sessionStorage

Implementa autenticação simples usando o JSON Server como repositório de usuários. Após o login, os dados da sessão são armazenados no sessionStorage — que persiste durante a sessão do navegador mas é apagado ao fechar a aba. A página protegida redireciona para o login se não houver sessão ativa.

Fluxo de autenticação

Usuário digita login e senha

O formulário chama loginUser(login, senha).

Busca no JSON Server

GET /api/usuarios retorna todos os usuários. O código compara login e senha localmente.

Sessão gravada no sessionStorage

Se o usuário for encontrado, seus dados são salvos em sessionStorage.setItem('usuarioCorrente', JSON.stringify(user)).

Redirecionamento para a área protegida

window.location.href = INDEX_URL leva o usuário autenticado. Qualquer página protegida verifica usuarioCorrente.login ao carregar.

Conceitos trabalhados

sessionStorage vs localStorage

sessionStorage: dura enquanto a aba está aberta.
localStorage: persiste indefinidamente. Para sessões de login, sessionStorage é mais seguro.

Proteção de rota

O script de verificação é carregado com <script src="login.js"> antes do <body>, garantindo o redirecionamento antes de qualquer conteúdo ser exibido.

⚠️ Atenção: segurança

Esta implementação é educacional. Em produção, a senha nunca deve ser comparada no cliente — use autenticação no servidor com hash (bcrypt) e JWT.

UUID para novos usuários

Novos usuários cadastrados recebem um ID único gerado com crypto.randomUUID(), evitando conflitos de ID com o JSON Server.

Dados do JSON Server

Endpoint: GET /api/usuarios

json db/db.json → "usuarios"

[
  { "id": 1, "nome": "Admin", "login": "admin", "senha": "admin123", "email": "admin@diw.com", "perfil": "admin" },
  { "id": 2, "nome": "Rommel Carneiro", "login": "prof", "senha": "prof123", "email": "rommel@pucminas.br", "perfil": "professor" },
  { "id": 3, "nome": "Aluno Teste", "login": "aluno", "senha": "aluno123", "email": "aluno@aluno.com", "perfil": "aluno" }
]

Exercícios sugeridos

Implemente controle de acesso por perfil: admin vê todos os usuários, aluno vê apenas o próprio.
Adicione um campo último acesso e atualize-o via PATCH a cada login.
Implemente logout automático após 5 minutos de inatividade usando setTimeout.
Adicione validação de senha forte no cadastro (mínimo 8 caracteres, ao menos 1 número).
Substitua sessionStorage por localStorage e observe a diferença de comportamento.