JWT-Authentifizierung: Login und Aktualisierung
Ablauf mit Access- und Refresh-Token, httpOnly-Cookies und stilles Aktualisieren mit Interceptors
JWT-Authentifizierung: Login und Aktualisierung ist eine kostenlose Vue Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Vue Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Modell mit Access- und Refresh-Token
Ein robustes JWT-Verfahren verwendet zwei Tokens: ein kurzlebiges Access-Token (Minuten), das mit jedem API-Request gesendet wird, und ein langlebiges Refresh-Token (Tage), das ausschließlich zum Erstellen neuer Access-Tokens dient. Dadurch wird die Angriffsfläche begrenzt, falls ein Access-Token offengelegt wird.
Registrieren des JWT-Plugins
Registrieren Sie bei Fastify @fastify/jwt und geben Sie ein starkes Secret an. Das Plugin fügt der App und den Request-Objekten Hilfsfunktionen zum Signieren und Verifizieren hinzu.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})Die Login-Route
POST /auth/login validiert die Zugangsdaten und stellt anschließend beide Tokens aus. Speichern Sie Passwörter niemals im Klartext – vergleichen Sie sie mit einem 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)
})Signieren des Access-Tokens
Signieren Sie ein kurzlebiges Access-Token mit der Benutzer-ID und möglichst wenigen Claims. Halten Sie die Gültigkeitsdauer kurz (z. B. 15 Minuten).
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Signieren des Refresh-Tokens
Signieren Sie ein langlebiges Refresh-Token mit einer eindeutigen Payload-Kennung (oder einem separaten Secret). Es wird ausschließlich am Refresh-Endpunkt verwendet.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Refresh-Token in einem httpOnly-Cookie
Speichern Sie das Refresh-Token in einem httpOnly-, SameSite-, Secure-Cookie. JavaScript kann es nicht lesen (wodurch der Diebstahl per XSS erschwert wird), und der Browser sendet es automatisch an den Refresh-Endpunkt.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Zurückgeben des Access-Tokens im Body
Das Access-Token wird im JSON-Response-Body zurückgegeben. Die Vue-App hält es im Arbeitsspeicher (nicht in localStorage) und fügt es an API-Requests an. Das Refresh-Token erscheint niemals im Body.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookieWarum Access-Tokens nicht in localStorage gespeichert werden sollten
localStorage kann von jedem Script gelesen werden, sodass eine XSS-Schwachstelle ein dort gespeichertes Token stehlen kann. Wenn das Access-Token im JavaScript-Arbeitsspeicher und das Refresh-Token in einem httpOnly-Cookie gespeichert wird, verringert sich der Schaden eines XSS-Angriffs.
Die Refresh-Route
POST /auth/refresh liest das Refresh-Token aus dem Cookie, verifiziert es und stellt ein neues Access-Token aus. Das neue Access-Token wird im Body zurückgegeben.
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' })
}
})Routen schützen
Fügen Sie einen preHandler hinzu, der das Access-Token aus dem Authorization-Header verifiziert. @fastify/jwts request.jwtVerify() löst bei ungültigen oder abgelaufenen Tokens einen Fehler aus und gibt 401 zurück.
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: Cookie löschen
Beim Logout wird das Refresh-Cookie gelöscht, sodass damit keine Access-Tokens mehr erstellt werden können. Für stärkere Garantien können Sie Refresh-Tokens zusätzlich serverseitig verfolgen und widerrufen (über eine Sperrliste oder Rotation).
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Kurzer Test
Testen Sie Ihr Verständnis der JWT-Authentifizierung.
Zusammenfassung
Sie haben JWT-Login und Token-Erneuerung gelernt:
- Kurzlebiges Access-Token plus langlebiges Refresh-Token
POST /auth/loginvalidiert die Zugangsdaten und signiert beide Tokens- Das Refresh-Token wird in einem httpOnly SameSite Secure-Cookie gespeichert
- Das Access-Token wird im Body zurückgegeben und im JavaScript-Arbeitsspeicher gehalten
POST /auth/refresherstellt anhand des Cookies ein neues Access-Token
Lerne HTML mit einem KI-Tutor — kostenlos
Schreibe und führe echten Code in deinem Browser aus, bekomme sofortige Hilfe von einem 24/7 KI-Tutor und setze dein Lernen im Web oder in der App fort.
- Kurse
- 42
- Lektionen
- 156
Häufig gestellte Fragen
Ist die Lektion „JWT-Authentifizierung: Login und Aktualisierung“ kostenlos?
Ja — der vollständige Text von „JWT-Authentifizierung: Login und Aktualisierung“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Vue Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Vue Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „JWT-Authentifizierung: Login und Aktualisierung“?
Ablauf mit Access- und Refresh-Token, httpOnly-Cookies und stilles Aktualisieren mit Interceptors Du übst Vue Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Vue Academy zu starten?
Keine Vorkenntnisse erforderlich. Vue Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.
Wie lange dauert die Lektion „JWT-Authentifizierung: Login und Aktualisierung“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Vue Academy-Lektion Code schreiben und ausführen?
Ja. Jede Vue Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- Fastify-Backend für Vue-SPAs
- JWT-Authentifizierung: Login und Aktualisierung
- Authentifizierte API-Aufrufe mit Axios-Interceptors
- Full-Stack-Vue in der Produktion bereitstellen