Pola Autentikasi Aman
Penyimpanan token (memori vs localStorage vs cookie httpOnly), refresh diam-diam, serta logout saat tab ditutup.
Pola Autentikasi Aman adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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.
Token dan Tempat Penyimpanannya
SPA melakukan autentikasi dengan token, tetapi tempat penyimpanannya menentukan tingkat risiko XSS dan CSRF Anda. Pola modern memisahkan access token berumur pendek dari refresh token berumur panjang, dan menyimpan keduanya secara berbeda.
Masalah localStorage
Menyimpan token di localStorage memang praktis, tetapi berbahaya: skrip apa pun yang disisipkan melalui XSS dapat membacanya dan mengirim token tersebut keluar. Hindari menyimpan kredensial di sana.
// AVOID
localStorage.setItem("token", accessToken);Access Token di Memori
Simpan access token dalam variabel JavaScript atau ref reaktif. Token tersebut hilang saat dimuat ulang, sehingga XSS yang berhasil memiliki jendela waktu yang jauh lebih singkat dan tidak ada apa pun yang tersimpan di disk.
import { ref } from "vue";
export const accessToken = ref(null);Refresh Token dalam Kuki httpOnly
Refresh token berada dalam kuki HttpOnly, Secure, dan SameSite. JavaScript tidak dapat membacanya, sehingga XSS tidak dapat mencurinya, dan peramban hanya mengirimkannya ke endpoint autentikasi Anda.
Set-Cookie: refresh=...; HttpOnly; Secure; SameSite=Strict; Path=/authMelampirkan Access Token
Pencegat permintaan Axios menambahkan access token yang tersimpan di memori ke header Authorization pada setiap panggilan.
api.interceptors.request.use((config) => {
if (accessToken.value) {
config.headers.Authorization = "Bearer " + accessToken.value;
}
return config;
});Mendeteksi Kedaluwarsa: 401
Saat access token kedaluwarsa, server merespons dengan 401 Unauthorized. Pencegat respons menangkapnya untuk memicu penyegaran token.
api.interceptors.response.use(
(res) => res,
async (error) => {
if (error.response?.status === 401) {
// attempt refresh
}
return Promise.reject(error);
}
);Menyegarkan Token
Saat menerima 401, panggil endpoint penyegaran. Peramban mengirim kuki refresh httpOnly secara otomatis (withCredentials), dan server mengembalikan access token baru.
const { data } = await axios.post("/auth/refresh", null, {
withCredentials: true
});
accessToken.value = data.accessToken;Mencoba Kembali Permintaan original
Setelah refreshing, ulangi permintaan gagal original dengan token baru agar pengguna tidak menyadarinya.
async (error) => {
const original = error.config;
if (error.response?.status === 401 && !original._retry) {
original._retry = true;
const { data } = await axios.post("/auth/refresh", null, { withCredentials: true });
accessToken.value = data.accessToken;
original.headers.Authorization = "Bearer " + data.accessToken;
return api(original);
}
return Promise.reject(error);
}Menghindari Serbuan Penyegaran
Jika banyak permintaan menghasilkan 401 sekaligus, antrekan permintaan tersebut di belakang satu penyegaran yang sedang berlangsung agar Anda tidak memanggil titik akhir penyegaran berulang kali.
let refreshing = null;
function refresh() {
if (!refreshing) {
refreshing = axios.post("/auth/refresh", null, { withCredentials: true })
.finally(() => { refreshing = null; });
}
return refreshing;
}Keluar
Saat keluar, hapus token dari memori dan panggil titik akhir yang menghapus kuki penyegaran di sisi server.
async function logout() {
accessToken.value = null;
await axios.post("/auth/logout", null, { withCredentials: true });
}Gabungkan dengan Pertahanan CSRF
Karena kuki penyegaran dikirim secara otomatis, lindungi titik akhir tersebut dengan SameSite dan token CSRF, sama seperti rute lain yang diautentikasi dengan kuki.
Pemeriksaan Singkat
Di mana token akses dan token penyegaran masing-masing harus disimpan?
Ringkasan
Simpan token akses dalam ref di memori (jangan pernah menggunakan localStorage) dan token penyegaran dalam kuki HttpOnly. Pencegat permintaan melampirkan token pembawa; pencegat respons menangkap 401, memanggil titik akhir penyegaran, memperbarui token, lalu mencoba kembali permintaan original—dengan menggabungkan penyegaran bersamaan dan memasangkannya dengan pertahanan CSRF.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Pola Autentikasi Aman” gratis?
Ya — teks lengkap “Pola Autentikasi Aman” 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 “Pola Autentikasi Aman”?
Penyimpanan token (memori vs localStorage vs cookie httpOnly), refresh diam-diam, serta logout saat tab ditutup. 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 4 dari 4.
Berapa lama pelajaran “Pola Autentikasi Aman” 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
- Pencegahan XSS di Vue
- Content Security Policy (CSP) dengan Vue
- Perlindungan CSRF di SPA Vue
- Pola Autentikasi Aman