Tipo de demo · 13

Diagrama de fluxograma (passo a passo)

Use isto quando precisar explicar um processo de múltiplos passos ou com ramificações — onde o caminho se bifurca em uma pergunta de sim/não e o leitor precisa seguir uma rota de cada vez.

Este é um exemplar copiável. Extraia o bloco <section id="demo-flowchart"> — seu CSS, SVG e JS — para uma lição construída a partir de assets/lesson-template.html. Os design tokens aqui são copiados literalmente daquele template; não reestilize.

1

A ideia central


Quando uma requisição chega, o servidor não confia nela de imediato. Ele faz uma curta série de perguntas de sim/não, e o primeiro "não" encerra a conversa. Passe por todas e você é autorizado a entrar; tropece em qualquer uma e você é negado.

Pense nisso como… um segurança na porta. Você tem pulseira? Ela é a verdadeira, não uma falsa? Ela expirou? Cada "não" te barra na hora — só uma sequência limpa de "sim" te coloca pra dentro.

O que cada pergunta realmente é

A "pulseira" é um bearer token enviado no cabeçalho Authorization: Bearer <jwt>. Presente? verifica se o cabeçalho existe e está bem formado. Válido? verifica a assinatura do token contra a chave pública do servidor, então um token forjado ou adulterado falha aqui. Não expirado? compara o claim exp do token com o relógio atual. Cada verificação é uma guard clause: a primeira falha curto-circuita com um 401 e as demais nunca rodam.

2

Percorra a decisão, um passo de cada vez


Escolha uma requisição e pressione Próximo para destacar cada decisão em sequência. Observe onde um "não" se desvia para Negar e uma sequência limpa chega a Permitir.

Rastrear requisição:
sim sim sim não não não Requisição chega Token presente? Token válido? Não expirado? ✓ Permitir — 200 OK ✕ Negar — 401
Leia de cima → baixo. Cada losango é um portão de sim/não; um "não" ramifica à direita para Negar, uma sequência limpa chega a Permitir.
Passo 0 de 4

Comece aqui

Uma requisição chega ao servidor

Pressione Próximo para seguir a requisição de token válido por cada verificação. Troque a requisição acima para ver como um token diferente é barrado.

O mesmo fluxo como guard clauses

No código, o fluxograma é uma cadeia de early returns. A ordem importa: verificações estruturais baratas rodam antes da custosa verificação criptográfica, e toda falha retorna o mesmo 401 para que um atacante não consiga saber por que foi rejeitado.

function authenticate(req) {
  const token = req.headers.authorization?.replace('Bearer ', '');
  if (!token) return deny(401);            // presente?  → não
  const claims = verify(token, PUBLIC_KEY); // lança erro em assinatura inválida
  if (!claims) return deny(401);           // válido?    → não
  if (claims.exp < now()) return deny(401); // expirado?  → sim (logo: não)
  return allow(claims);                     // tudo certo → 200 OK
}