Axios: Cara Membuat Default Authorization Header

Secara default, axios tidak mengirimkan header Authorization pada setiap requestnya. Ini akan aman-aman saja saat kita melakukan request ke server yang tidak memerlukan hal itu. Namun, jika request yang dilakukan membutuhkannya, maka kita bisa menambahkan konfigurasi global pada axios agar semua request ditambahkan header Authorization.

Kenapa Menambahkan Header Authorization Secara Global?

Singkatnya adalah agar kita tidak perlu menambahkan header tersebut pada setiap request secara manual. Bayangkan saja jika kita memiliki 100 request maka kita perlu menambahkan header itu secara manual pada masing-masing request. Lebih repot lagi jika semua request itu sudah kita implementasikan di dalam kodingan dan baru mau ditambahkan header Authorization. Maka mau tidak mau harus mngedit satu per satu atau replace all menggunakan regex.

Contoh Request Menggunakan Header Authorization

Di bawah ini adalah contoh jika kita ingin menggunakan header Authorization secara langsung pada request.

Pertama, kita membuat konfig terlebih dahulu.

const token = localStorage.getItem('token')
const config = {
    headers: { Authorization: 'Bearer '+token }
};

Contoh implementasi pada get request:

axios.get(url, config).then(res=>{
  //respon dari server
})

Contoh implementasi pada post request:

let field ={
  student_id : 5,
  group_id : 12
}

axios.post(url, field, config).then(res=>{
  //respon dari server
})

Menambahkan Header Authorization Pada Konfigurasi Global

Dengan menambahkan header Authorization pada konfigurasi global ini maka kita tidak perlu lagi menambahkannya pada masing-masing request secara manual.

Kode untuk menambahkannya ke konfigurasi global adalah sebagai berikut:

const token = localStorage.getItem('token')
if (token) {
    axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
}

Setelah ditambahkan ke dalam konfigurasi global tersebut maka kita bisa menghilangkan konfig Auth dari masing-masing request. Contoh pada request di atas akan menjadi seperti di bawah ini:

Contoh implementasi pada get request:

axios.get(url).then(res=>{
  //respon dari server
})

Contoh implementasi pada post request:

let field ={
  student_id : 5,
  group_id : 12
}

axios.post(url, field).then(res=>{
  //respon dari server
})