Axios Laravel Sanctum

4 min read Jul 01, 2024

Menggunakan Axios dengan Laravel Sanctum

Laravel Sanctum adalah paket autentikasi yang ringan dan sederhana untuk aplikasi Laravel. Ia memungkinkan Anda untuk mengotentikasi pengguna pada aplikasi berbasis API, termasuk aplikasi web, mobile, dan desktop. Axios adalah library JavaScript yang populer untuk membuat permintaan HTTP. Dalam artikel ini, kita akan membahas bagaimana menggabungkan Axios dengan Laravel Sanctum untuk membangun aplikasi yang aman dan mudah digunakan.

1. Persiapan

Pertama, pastikan Anda sudah menginstal Laravel Sanctum pada proyek Anda. Jika belum, jalankan perintah berikut:

composer require laravel/sanctum

Selanjutnya, terbitkan file konfigurasi Sanctum dengan perintah:

php artisan vendor:publish --tag=sanctum-config

Kemudian, tambahkan middleware auth:sanctum ke route yang ingin Anda proteksi. Misalnya, Anda bisa menambahkannya ke route /api/users:

Route::middleware(['auth:sanctum'])->group(function () {
    Route::get('/users', [UserController::class, 'index']);
});

2. Membuat Token Akses

Setelah Sanctum terinstal, Anda perlu membuat token akses untuk mengotentikasi pengguna. Anda bisa membuat token akses dengan melakukan permintaan POST ke endpoint /sanctum/token dengan data yang sesuai:

axios.post('/sanctum/token', {
  email: '[email protected]',
  password: 'your_password'
})
.then(response => {
  // simpan token akses di local storage atau cookie
  localStorage.setItem('token', response.data.token);
})
.catch(error => {
  // tangani error
  console.error(error);
});

3. Mengirim Permintaan Terotentikasi dengan Axios

Setelah memiliki token akses, Anda bisa menggunakannya untuk mengirimkan permintaan terotentikasi ke server. Anda perlu menyertakan token akses dalam header Authorization permintaan Anda.

Berikut contoh bagaimana mengirim permintaan GET ke endpoint /api/users menggunakan Axios:

// ambil token akses dari local storage
const token = localStorage.getItem('token');

axios.get('/api/users', {
  headers: {
    Authorization: `Bearer ${token}`
  }
})
.then(response => {
  // tampilkan data pengguna
  console.log(response.data);
})
.catch(error => {
  // tangani error
  console.error(error);
});

4. Tips Tambahan

Anda bisa menggunakan library seperti axios-http-client untuk membuat interceptor yang menambahkan token akses secara otomatis ke setiap permintaan.
Pastikan untuk menyimpan token akses dengan aman dan tidak menampilkannya secara langsung di kode frontend.
Anda bisa menggunakan fitur refresh token untuk memperbarui token akses yang sudah kadaluarsa.

Kesimpulan

Menggabungkan Axios dengan Laravel Sanctum adalah cara yang mudah dan efisien untuk membangun aplikasi API yang aman dan terotentikasi. Dengan menggunakan teknik yang dijelaskan di atas, Anda bisa membuat aplikasi yang responsif, mudah diakses, dan terlindungi dari akses yang tidak sah.