0Pricing
Vue Academy · Pelajaran

Autentikasi JWT: Login dan Refresh

Alur access token + refresh token, cookie httpOnly, serta refresh diam-diam dengan interceptor.

Autentikasi JWT: Login dan Refresh adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Model Token Akses dan Penyegaran

Skema JWT yang tangguh menggunakan dua token: token akses berumur singkat, yaitu beberapa menit, yang dikirim bersama setiap permintaan API, dan token penyegaran berumur panjang, yaitu beberapa hari, yang hanya digunakan untuk menerbitkan token akses baru. Hal ini membatasi dampak jika token akses bocor.

Mendaftarkan Pengaya JWT

Dengan Fastify, daftarkan @fastify/jwt dan berikan rahasia yang kuat. Pengaya ini menambahkan pembantu penandatanganan dan verifikasi ke objek aplikasi dan permintaan.

import jwt from '@fastify/jwt'

await app.register(jwt, {
  secret: process.env.JWT_SECRET
})

Rute Masuk

POST /auth/login memvalidasi kredensial, lalu menerbitkan kedua token. Jangan pernah menyimpan kata sandi dalam bentuk teks biasa—bandingkan dengan nilai 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)
})

Menandatangani Token Akses

Tandatangani token akses berumur singkat dengan ID pengguna dan klaim minimal. Buat masa berlakunya singkat, misalnya 15 menit.

const accessToken = app.jwt.sign(
  { sub: user.id, role: user.role },
  { expiresIn: '15m' }
)

Menandatangani Token Penyegaran

Tandatangani token penyegaran berumur panjang dengan penanda payload yang berbeda atau rahasia terpisah. Token ini hanya digunakan pada titik akhir penyegaran.

const refreshToken = app.jwt.sign(
  { sub: user.id, type: 'refresh' },
  { expiresIn: '7d' }
)

Token Penyegaran dalam Kuki httpOnly

Simpan token penyegaran dalam kuki httpOnly, SameSite, dan aman. JavaScript tidak dapat membacanya sehingga pencurian akibat XSS dapat dikurangi, dan browser mengirimkannya secara otomatis ke titik akhir penyegaran.

reply.setCookie('refreshToken', refreshToken, {
  httpOnly: true,
  sameSite: 'strict',
  secure: true,        // HTTPS only
  path: '/auth/refresh',
  maxAge: 60 * 60 * 24 * 7
})

Mengembalikan Token Akses dalam Isi Respons

Token akses dikembalikan dalam isi respons JSON. Aplikasi Vue menyimpannya di memori, bukan di localStorage, dan menambahkannya ke permintaan API. Token penyegaran tidak pernah muncul dalam isi respons.

return reply.send({
  accessToken,
  user: { id: user.id, name: user.name }
})
// refreshToken is only in the httpOnly cookie

Mengapa Token Akses Tidak Disimpan di localStorage

localStorage dapat dibaca oleh skrip apa pun, sehingga cacat XSS dapat mencuri token yang tersimpan di sana. Menyimpan token akses di memori JavaScript dan token penyegaran dalam kuki httpOnly mengurangi dampak XSS.

Rute Penyegaran

POST /auth/refresh membaca token penyegaran dari kuki, memverifikasinya, lalu menerbitkan token akses baru. Token akses baru tersebut dikembalikan dalam isi respons.

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' })
  }
})

Melindungi Rute

Tambahkan preHandler yang memverifikasi token akses dari tajuk Authorization. @fastify/jwt akan melemparkan kesalahan melalui request.jwtVerify() jika token tidak valid atau kedaluwarsa, lalu mengembalikan 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))

Keluar: Menghapus Kuki

Keluar akan menghapus kuki penyegaran sehingga kuki tersebut tidak dapat lagi menerbitkan token akses. Untuk jaminan yang lebih kuat, lacak atau cabut juga token penyegaran di sisi server, misalnya dengan daftar penolakan atau rotasi.

app.post('/auth/logout', async (req, reply) => {
  reply.clearCookie('refreshToken', { path: '/auth/refresh' })
  return reply.send({ ok: true })
})

Pemeriksaan Singkat

Uji pemahaman Anda tentang autentikasi JWT.

Rangkuman

Anda telah mempelajari proses masuk dan penyegaran JWT:

  • Token akses berumur singkat dan token penyegaran berumur panjang
  • POST /auth/login memvalidasi kredensial dan menandatangani keduanya
  • Token penyegaran disimpan dalam kuki httpOnly SameSite Aman
  • Token akses dikembalikan dalam isi respons dan disimpan di memori JavaScript
  • POST /auth/refresh menerbitkan token akses baru dari kuki

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Autentikasi JWT: Login dan Refresh” gratis?

Ya — teks lengkap “Autentikasi JWT: Login dan Refresh” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Autentikasi JWT: Login dan Refresh”?

Alur access token + refresh token, cookie httpOnly, serta refresh diam-diam dengan interceptor. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Autentikasi JWT: Login dan Refresh” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Backend Fastify untuk SPA Vue
  2. Autentikasi JWT: Login dan Refresh
  3. Panggilan API Terautentikasi dengan Interceptor Axios
  4. Men-deploy Vue Full-Stack ke Produksi
← Kembali ke Vue Academy