Bagaimanakah access token dan refresh token berfungsi bersama?

Question

IT Interview Practice · Accepted Answer

Kedua-dua token mengikut satu kitaran hayat yang mudah: **access token jangka pendek** membenarkan setiap panggilan API, dan **refresh token jangka panjang** secara senyap mencetak access token baharu apabila ia tamat tempoh — jadi pengguna kekal log masuk tanpa memasukkan semula kelayakan.

## Aliran

```
┌─────────┐  1. login (user + pass)   ┌────────────┐
│ Client  │ ────────────────────────▶ │ Auth server│
│         │ ◀──── access + refresh ─── │            │
└─────────┘                            └────────────┘
     │  2. panggilan API: Authorization: Bearer <access>
     ▼
┌────────────┐  sahkan tandatangan + exp   (tiada carian DB)
│ Resource   │ ──── 200 OK ────▶ (access masih sah)
│ API        │ ──── 401 ───────▶ (access tamat tempoh)
└────────────┘
     │  3. pada 401: POST /token { refresh }
     ▼
┌────────────┐  sahkan + putar
│ Auth server│ ──── access baharu (+ refresh baharu) ────▶ cuba semula panggilan
└────────────┘
```

1. **Login** — pengguna mengesahkan sekali; pelayan memulangkan **access token** (TTL pendek) dan **refresh token** (TTL panjang).
2. **Akses API** — klien menghantar access token dalam `Authorization: Bearer …` pada setiap request. API mengesahkannya secara stateless (tandatangan + `exp`) dan membalas — tiada stor sesi diperlukan.
3. **Refresh apabila tamat tempoh** — apabila API memulangkan `401` (atau klien nampak `exp` hampir), klien POST **refresh token** ke endpoint `/token` pelayan auth dan mendapat access token baharu, kemudian mencuba semula request asal. Pengguna tidak perasan apa-apa.
4. **Log keluar / batal** — pelayan memadam atau menyenaraihitam refresh token; refresh seterusnya gagal dan sesi berakhir (access token semasa masih mati sendiri dalam beberapa minit).

```js
// Interceptor klien: refresh sekali pada 401, kemudian cuba semula.
async function apiFetch(url, opts = {}) {
  let res = await fetch(url, withAuth(opts, accessToken));
  if (res.status === 401) {
    accessToken = await refreshAccessToken(refreshToken); // POST /token
    res = await fetch(url, withAuth(opts, accessToken));   // cuba semula
  }
  return res;
}
```

## Rotation refresh token

Amalan terbaik ialah **rotation**: setiap panggilan refresh memulangkan refresh token *baharu* dan membatalkan yang lama. Jika refresh token lama (yang sudah digunakan) dikemukakan semula, itu menandakan kecurian — pelayan membatalkan seluruh keluarga token dan memaksa log masuk semula. Ini mengehadkan kerosakan akibat refresh token yang dicuri.

## Penyimpanan

- **Refresh token** → cookie `httpOnly`, `Secure`, `SameSite` supaya JavaScript (dan dengan itu XSS) tidak boleh membacanya.
- **Access token** → disimpan dalam memori pada klien; hayat pendek mengehadkan pendedahan.
- Jangan sekali-kali meletakkan mana-mana dalam `localStorage` jika boleh dielakkan — ia boleh dibaca oleh mana-mana skrip yang disuntik.

## Mengapa ia penting

Aliran ini ialah tulang belakang pengurusan sesi dalam SPA moden, aplikasi mudah alih, dan API, jadi penemu duga menjangka anda menjejakinya dari mula ke akhir: keluarkan kedua-duanya pada login, benarkan dengan access token, refresh secara telus apabila tamat tempoh, dan rotate + batal untuk keselamatan. Mendapatkan butiran dengan betul — pengesahan stateless, refresh hanya di token endpoint, rotation dengan pengesanan penggunaan semula, dan penyimpanan `httpOnly` — ialah perbezaan antara sesi yang lancar dan selamat dengan sesi di mana satu token yang dicuri bermakna pengambilalihan akaun jangka panjang.

Aliran

Rotation refresh token

Penyimpanan

Mengapa ia penting

Soalan berkaitan