Autenticação JWT: login e atualização
Fluxo de token de acesso + token de atualização, cookies httpOnly e atualização silenciosa com interceptadores.
Autenticação JWT: login e atualização é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
Modelo de token de acesso e de atualização
Um esquema JWT robusto usa dois tokens: um token de acesso de curta duração (minutos), enviado com cada requisição de API, e um token de atualização de longa duração (dias), usado apenas para emitir novos tokens de acesso. Isso limita a exposição caso um token de acesso vaze.
Registrando o plug-in JWT
Com o Fastify, registre @fastify/jwt e forneça um segredo forte. Ele adiciona auxiliares de assinatura e verificação ao app e aos objetos de requisição.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})A rota de autenticação
POST /auth/login valida as credenciais e então emite os dois tokens. Nunca armazene senhas em texto simples — compare-as com um hash (bcrypt/argon2).
app.post('/auth/login', async (req, reply) => {
const { email, password } = req.body
const user = await findUser(email)
if (!user || !(await verifyHash(password, user.hash))) {
return reply.code(401).send({ error: 'Invalid credentials' })
}
// ... sign tokens (next scene)
})Assinando o token de acesso
Assine um token de acesso de curta duração com o identificador do usuário e declarações mínimas. Mantenha a expiração curta (por exemplo, 15 minutos).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Assinando o token de atualização
Assine um token de atualização de longa duração com um marcador distinto no payload (ou um segredo separado). Ele é usado exclusivamente na rota de atualização.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Token de atualização em um cookie httpOnly
Armazene o token de atualização em um cookie httpOnly, SameSite e Seguro. O JavaScript não pode lê-lo (o que reduz o risco de roubo por XSS), e o navegador o envia automaticamente para a rota de atualização.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Retornando o token de acesso no corpo
O token de acesso é retornado no corpo da resposta JSON. O app Vue o mantém na memória (não em localStorage) e o anexa às requisições de API. O token de atualização nunca aparece no corpo.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookiePor que não armazenar tokens de acesso em localStorage
localStorage pode ser lido por qualquer script, portanto um erro de XSS pode roubar um token armazenado ali. Manter o token de acesso na memória do JS e o token de atualização em um cookie httpOnly reduz o impacto de um XSS.
A rota de atualização
POST /auth/refresh lê o token de atualização do cookie, verifica-o e emite um novo token de acesso. Ela retorna o novo token de acesso no corpo.
app.post('/auth/refresh', async (req, reply) => {
const token = req.cookies.refreshToken
if (!token) return reply.code(401).send()
try {
const payload = app.jwt.verify(token)
const accessToken = app.jwt.sign(
{ sub: payload.sub }, { expiresIn: '15m' }
)
return reply.send({ accessToken })
} catch {
return reply.code(401).send({ error: 'Invalid refresh' })
}
})Protegendo rotas
Adicione um preHandler que verifique o token de acesso do cabeçalho Authorization. @fastify/jwt com request.jwtVerify() lança um erro para tokens inválidos ou expirados, retornando 401.
app.get('/api/me', {
preHandler: async (req, reply) => {
try { await req.jwtVerify() }
catch { reply.code(401).send({ error: 'Unauthorized' }) }
}
}, async (req) => getProfile(req.user.sub))Encerramento de sessão: limpando o cookie
O encerramento de sessão limpa o cookie de atualização para que ele não possa mais emitir tokens de acesso. Para obter garantias mais fortes, rastreie e revogue também os tokens de atualização no servidor (usando uma lista de bloqueio ou rotação).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Verificação rápida
Teste sua compreensão da autenticação JWT.
Revisão
Você aprendeu sobre login e atualização com JWT:
- Token de acesso de curta duração + token de atualização de longa duração
POST /auth/loginvalida as credenciais e assina ambos- O token de atualização fica em um cookie httpOnly SameSite Secure
- O token de acesso retorna no corpo e permanece na memória do JS
POST /auth/refreshemite um novo token de acesso a partir do cookie
Perguntas Frequentes
A aula “Autenticação JWT: login e atualização” é grátis?
Sim — o texto completo de “Autenticação JWT: login e atualização” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Autenticação JWT: login e atualização”?
Fluxo de token de acesso + token de atualização, cookies httpOnly e atualização silenciosa com interceptadores. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Autenticação JWT: login e atualização”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Backend Fastify para SPAs Vue
- Autenticação JWT: login e atualização
- Chamadas autenticadas à API com interceptadores do Axios
- Implantação de Vue full-stack em produção