Uwierzytelnianie JWT: logowanie i odświeżanie
Przepływ access token + refresh token, ciastka httpOnly oraz ciche odświeżanie z interceptorami.
Uwierzytelnianie JWT: logowanie i odświeżanie to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Model tokenów dostępu i odświeżania
Solidny schemat JWT wykorzystuje dwa tokeny: krótkotrwały token dostępu (ważny przez kilka minut), wysyłany z każdym żądaniem API, oraz długotrwały token odświeżania (ważny przez kilka dni), używany wyłącznie do uzyskiwania nowych tokenów dostępu. Ogranicza to skutki wycieku tokenu dostępu.
Rejestrowanie pluginu JWT
W Fastify należy zarejestrować @fastify/jwt i podać silny sekret. Dodaje to do aplikacji i obiektów żądań pomocnicze funkcje podpisywania i weryfikacji.
import jwt from '@fastify/jwt'
await app.register(jwt, {
secret: process.env.JWT_SECRET
})Trasa logowania
POST /auth/login weryfikuje dane logowania, a następnie wydaje oba tokeny. Haseł w postaci jawnego tekstu nigdy nie należy przechowywać — należy je porównywać z hashem (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)
})Podpisywanie tokenu dostępu
Należy podpisać krótkotrwały token dostępu, umieszczając w nim identyfikator użytkownika i minimalny zestaw claims. Czas wygaśnięcia powinien być krótki, np. 15 minut.
const accessToken = app.jwt.sign(
{ sub: user.id, role: user.role },
{ expiresIn: '15m' }
)Podpisywanie tokenu odświeżania
Należy podpisać długotrwały token odświeżania z odrębnym znacznikiem w payloadzie (lub użyć osobnego sekretu). Służy on wyłącznie w endpoincie odświeżania.
const refreshToken = app.jwt.sign(
{ sub: user.id, type: 'refresh' },
{ expiresIn: '7d' }
)Token odświeżania w ciasteczku httpOnly
Należy przechowywać token odświeżania w bezpiecznym ciasteczku z atrybutami httpOnly, SameSite i Secure. JavaScript nie może go odczytać, co ogranicza kradzież przez XSS, a przeglądarka automatycznie wysyła go do endpointu odświeżania.
reply.setCookie('refreshToken', refreshToken, {
httpOnly: true,
sameSite: 'strict',
secure: true, // HTTPS only
path: '/auth/refresh',
maxAge: 60 * 60 * 24 * 7
})Zwracanie tokenu dostępu w treści odpowiedzi
Token dostępu jest zwracany w treści odpowiedzi JSON. Aplikacja Vue przechowuje go w pamięci, a nie w localStorage, i dołącza do żądań API. Token odświeżania nigdy nie pojawia się w treści odpowiedzi.
return reply.send({
accessToken,
user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookieDlaczego nie przechowywać tokenów dostępu w localStorage
localStorage jest dostępny dla każdego skryptu, więc błąd XSS może wykraść przechowywany w nim token. Przechowywanie tokenu dostępu w pamięci JavaScriptu, a tokenu odświeżania w ciasteczku httpOnly ogranicza skutki XSS.
Trasa odświeżania
POST /auth/refresh odczytuje token odświeżania z ciasteczka, weryfikuje go i wydaje nowy token dostępu. Zwraca świeży token dostępu w treści odpowiedzi.
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' })
}
})Ochrona tras
Należy dodać preHandler, który weryfikuje token dostępu z nagłówka Authorization. Metoda request.jwtVerify() z @fastify/jwt zgłasza wyjątek w przypadku nieważnych lub wygasłych tokenów, zwracając 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))Wylogowanie: usuwanie ciasteczka
Wylogowanie usuwa ciasteczko z tokenem odświeżania, dzięki czemu nie można już za jego pomocą uzyskiwać tokenów dostępu. Dla większego bezpieczeństwa należy również śledzić i unieważniać tokeny odświeżania po stronie serwera, na przykład za pomocą denylisty lub rotacji.
app.post('/auth/logout', async (req, reply) => {
reply.clearCookie('refreshToken', { path: '/auth/refresh' })
return reply.send({ ok: true })
})Szybki test
Proszę sprawdzić swoją wiedzę na temat uwierzytelniania JWT.
Podsumowanie
Poznali Państwo logowanie i odświeżanie za pomocą JWT:
- krótkotrwały token dostępu oraz długotrwały token odświeżania
POST /auth/loginweryfikuje dane logowania i podpisuje oba tokeny- token odświeżania trafia do bezpiecznego ciasteczka z atrybutami httpOnly SameSite Secure
- token dostępu jest zwracany w treści odpowiedzi i przechowywany w pamięci JavaScriptu
POST /auth/refreshuzyskuje nowy token dostępu na podstawie ciasteczka
Często zadawane pytania
Czy lekcja „Uwierzytelnianie JWT: logowanie i odświeżanie” jest bezpłatna?
Tak — pełny tekst „Uwierzytelnianie JWT: logowanie i odświeżanie” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Uwierzytelnianie JWT: logowanie i odświeżanie”?
Przepływ access token + refresh token, ciastka httpOnly oraz ciche odświeżanie z interceptorami. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Uwierzytelnianie JWT: logowanie i odświeżanie”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Backend Fastify dla aplikacji SPA Vue
- Uwierzytelnianie JWT: logowanie i odświeżanie
- Uwierzytelnione wywołania API z interceptorami Axios
- Wdrażanie pełnego stosu Vue na produkcję