Autenticazione JWT: login e refresh
Flusso access token + refresh token, cookie httpOnly, silent refresh con interceptor.
Autenticazione JWT: login e refresh è una lezione Vue Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Vue Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Vue Academy include 4 lezioni in totale.
Modello dei token di accesso e di refresh
Uno schema JWT robusto usa due token: un token di accesso di breve durata (minuti), inviato con ogni richiesta API, e un token di refresh di lunga durata (giorni), utilizzato esclusivamente per generare nuovi token di accesso. In questo modo si limita l'esposizione nel caso in cui un token di accesso venga sottratto.
Registrare il plugin JWT
Con Fastify, registri @fastify/jwt e fornisca un secret robusto. Il plugin aggiunge all'app e agli oggetti request gli helper per la firma e la verifica.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})La route di login
POST /auth/login valida le credenziali e quindi emette entrambi i token. Non memorizzi mai le password in chiaro: le confronti con un 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)
})Firmare il token di accesso
Firmi un token di accesso di breve durata con l'id dell'utente e il minimo indispensabile di claim. Mantenga breve la scadenza (ad es. 15 minuti).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Firmare il token di refresh
Firmi un token di refresh di lunga durata con un indicatore distintivo nel payload (o con un secret separato). Viene utilizzato esclusivamente nell'endpoint di refresh.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Token di refresh in un cookie httpOnly
Memorizzi il token di refresh in un cookie httpOnly, SameSite e Secure. JavaScript non può leggerlo (riducendo il rischio di furto tramite XSS) e il browser lo invia automaticamente all'endpoint di refresh.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Restituire il token di accesso nel body
Il token di accesso viene restituito nel body della risposta JSON. L'app Vue lo conserva in memoria (non in localStorage) e lo allega alle richieste API. Il token di refresh non compare mai nel body.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookiePerché non memorizzare i token di accesso in localStorage
localStorage è leggibile da qualunque script, quindi una vulnerabilità XSS può sottrarre il token che contiene. Conservare il token di accesso nella memoria JavaScript e il token di refresh in un cookie httpOnly riduce l'impatto di un attacco XSS.
La route di refresh
POST /auth/refresh legge il token di refresh dal cookie, lo verifica ed emette un nuovo token di accesso. Restituisce il nuovo token di accesso nel body.
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' })
}
})Proteggere le route
Aggiunga un preHandler che verifichi il token di accesso nell'header Authorization. Il metodo request.jwtVerify() di @fastify/jwt genera un'eccezione per i token non validi o scaduti e restituisce 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))Logout: cancellare il cookie
Il logout cancella il cookie di refresh, impedendogli di generare altri token di accesso. Per garanzie più solide, tenga traccia dei token di refresh e li revochi anche lato server (tramite una denylist o la rotazione).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Verifica rapida
Verifichi la sua comprensione dell'autenticazione JWT.
Riepilogo
Ha imparato a gestire login e refresh con JWT:
- Token di accesso di breve durata e token di refresh di lunga durata
POST /auth/loginvalida le credenziali e firma entrambi i token- Il token di refresh viene inserito in un cookie httpOnly SameSite Secure
- Il token di accesso viene restituito nel body e vive nella memoria JavaScript
POST /auth/refreshgenera un nuovo token di accesso dal cookie
Domande Frequenti
La lezione «Autenticazione JWT: login e refresh» è gratuita?
Sì — il testo completo di «Autenticazione JWT: login e refresh» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Vue Academy, passa a CoddyKit PRO. Il corso Vue Academy include 4 lezioni in totale.
Cosa imparerò in «Autenticazione JWT: login e refresh»?
Flusso access token + refresh token, cookie httpOnly, silent refresh con interceptor. Eserciti Vue Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Vue Academy?
Non è richiesta alcuna esperienza precedente. Vue Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Autenticazione JWT: login e refresh»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Vue Academy?
Sì. Ogni lezione Vue Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Backend Fastify per SPA Vue
- Autenticazione JWT: login e refresh
- Chiamate API autenticate con gli interceptor Axios
- Deployment in produzione di Vue full-stack