Cara menambah pengepala dalam Vue.js

Vue.js ialah rangka kerja bahagian hadapan yang popular yang terkenal dengan API yang ringkas dan mudah digunakan serta seni bina yang sangat boleh digubah. Apabila anda membina aplikasi web, anda biasanya menggunakan klien HTTP untuk berinteraksi dengan API. Pelanggan boleh menjadi XMLHttpRequest di dalam penyemak imbas, atau ia boleh menjadi pelaksanaan dalam perpustakaan JavaScript seperti axios. Apabila menggunakan klien HTTP ini, anda mungkin perlu menambah beberapa maklumat tambahan, seperti pengepala pengesahan atau pengepala silang asal, dsb. Oleh itu, artikel ini akan memperkenalkan cara menambah pengepala dalam Vue.js.

Langkah pertama: import klien HTTP

Tidak kira klien HTTP yang anda gunakan, langkah pertama ialah mengimportnya ke dalam komponen Vue.js anda. Contohnya, jika anda menggunakan axios, anda perlu menambah kod berikut di bawah tag <script> komponen:

import axios from 'axios'

Di sini, kami telah mengimport pustaka axios.

Langkah 2: Tambah pengepala

Setelah anda mengimport klien HTTP, anda boleh menggunakannya untuk menghantar permintaan GET, POST, PUT, DELETE, dsb. Sekarang, mari lihat cara menambah pengepala permintaan.

axios.get(url, {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
.then(response => {
  // 处理响应数据
})
.catch(error => {
  // 处理错误
})

Di sini kami menghantar permintaan GET menggunakan axios. Parameter kedua ialah item konfigurasi dengan objek headers menentukan pengepala kebenaran. Dengan mengandaikan API bahagian belakang anda menjangkakan pengepala kebenaran bagi borang Bearer your-token, maka anda boleh mengisinya dengan kod berikut:

'Authorization': 'Bearer ' + token

Langkah 3: Tambahkan pengepala pada semua permintaan

Jika anda perlu menambah maklumat pengepala yang sama dalam setiap permintaan, anda boleh menggunakan pemintas axios. Ini membolehkan anda menambahkan pengepala secara global sebelum membuat permintaan. Berikut ialah contoh menambahkan pengepala Kebenaran secara global dalam axios:

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('auth-token')
  config.headers.Authorization = token ? `Bearer ${token}` : ''
  
  return config
})

Di sini kami menambah pemintas pada contoh axios. Kami menyemak auth-token dalam storan tempatan dan menetapkan pengepala Authorization berdasarkan nilainya. Jika tiada pengepala sedemikian, nilainya ialah rentetan kosong.

Kesimpulan

Apabila membina aplikasi web dengan Vue.js, menambah maklumat pengepala boleh meningkatkan aplikasi anda dengan mudah. Ia meningkatkan keselamatan dan memastikan kebenaran panggilan API yang betul. Dalam artikel ini, kami mempelajari cara menggunakan axios untuk menambah maklumat pengepala dalam aplikasi Vue.js. Menggunakan teknik yang diterangkan dalam artikel ini, anda boleh membuat aplikasi web dengan mudah yang berkomunikasi dengan pasti dengan bahagian belakang.

Atas ialah kandungan terperinci Cara menambah pengepala dalam Vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!