Axios: Memperbarui tajuk autentikasi pada setiap permintaan?

Saya memiliki kasus penggunaan serupa di mana akan sangat bagus jika header yang diteruskan akan dievaluasi dengan malas untuk setiap permintaan.

Pikiran:
Alih-alih meneruskan hash header dengan penuh semangat sebagai objek ( axios.create({headers: {...}}) kita bisa melewatkan fungsi yang mengembalikan header ( axios.create({headers: () => {...}} ) yang akan dievaluasi sebelum permintaan dikirim.

Bagaimana menurut anda?
Sunting: Ini adalah proposal, saya pikir ini tidak berfungsi saat ini.

Saya mengalami kasus penggunaan yang sama. Apa yang akhirnya saya lakukan dalam jangka pendek adalah menggunakan fungsi transformRequest . Jelas merupakan peretasan dan akan senang membantu menerapkan pendekatan pemuatan lambat yang tepat ke dalam basis kode.

Lihat di bawah untuk cuplikan kode. auth() mendapatkan token pengguna yang masuk jika tersedia.

let HTTP = axios.create({
  baseURL: baseurl,
  transformRequest: [function (data, headers) {
    headers['Authorization'] = auth()
    return JSON.stringify(data)
  }],
  headers: {
    'Content-Type': 'application/json'
  }
})

Saya telah menggunakan pencegat untuk tujuan ini. Jika URL dasar permintaan adalah ke API saya, saya menambahkan header auth (untuk mencegah pengiriman kredensial ke pihak ketiga). Ini dijalankan pada setiap permintaan jadi jika token berubah (misalnya sebagai akibat dari penyegaran token) maka permintaan berikutnya mengambil token baru. Saya juga memastikan saya memeriksa nilai yang ada dalam permintaan untuk mengizinkan penggantian header dari situs panggilan jika itu diperlukan untuk alasan apa pun.

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }

    return config;
  },
  error => Promise.reject(error)
);

@mattstrayer dapatkah Anda menunjukkan metode getToken()? Apakah Anda menyimpan token Anda di localStorage atau AsyncStorage(React Native)? Terima kasih sebelumnya!

Saya berakhir dengan ini.

axios.create({
  baseURL: '<your-api>',
  headers: {
    Authorization: {
      toString () {
        return `Bearer ${localStorage.getItem('token')}`
      }
    }
  }
})

Saya tidak yakin apakah itu berfungsi untuk kasus apa pun.

File http.js :

import axios from 'axios';
import {store} from './store';

const http = axios.create ({
  baseURL: process.env.VUE_APP_ROOT_API,
  timeout: 1000,
  headers: {'Content-Type': 'application/json'},
});

http.interceptors.request.use (
  function (config) {
    const token = store.token;
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  function (error) {
    return Promise.reject (error);
  }
);

export default http;

Toko saya, "kelas" get/set sederhana

export const store = {
    _username: '',
    _email: '',
    _token: '',

    isLogged () {
      return this.token
    },

    set username (str) {
      this._username = str
      localStorage.setItem('username',str)
    },
    get username () {
      return this._username || localStorage.getItem('username')
    },

    set email (str) {
      this._email = str
      localStorage.setItem('email',str)
    },
    get email () {
      return this._email || localStorage.getItem('email')
    },

    set token (str) {
      this._token = str
      localStorage.setItem('token',str)
    },
    get token () {
      return this._token || localStorage.getItem('token')
    }

  }

"Kelas" layanan pengguna saya:

import http from './http'

export const user = {
  ping: () => http.get('/users/ping'),
  save: (user) => http.post('/users', user)
}

dan akhirnya, implementasi saya:

import {user} from '@/services'

 user.ping().then( r => {
      console.log(r.data)
    })

btw, process.env.VUE_APP_ROOT_API dan @/services adalah hal-hal Vue...

Hasil:

@danielschmitz terima kasih untuk contoh itu!!

Sepertinya Anda sudah mengetahui ini dan itu bukan bug, jadi saya tutup ini

Saya merasa berguna untuk membungkus pencegat di async/menunggu untuk memastikan token saya disetel sebelum panggilan API dipicu:

http.interceptors.request.use (
  async (config) => {
    const token = await getToken(); // slightly longer running function than example above
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  },
  (error) => {
    return Promise.reject (error);
  }
);

Saya telah menggunakan pencegat untuk tujuan ini. Jika URL dasar permintaan adalah ke API saya, saya menambahkan header auth (untuk mencegah pengiriman kredensial ke pihak ketiga). Ini dijalankan pada setiap permintaan jadi jika token berubah (misalnya sebagai akibat dari penyegaran token) maka permintaan berikutnya mengambil token baru. Saya juga memastikan saya memeriksa nilai yang ada dalam permintaan untuk mengizinkan penggantian header dari situs panggilan jika itu diperlukan untuk alasan apa pun.

axios.interceptors.request.use(
  config => {
    if (config.baseURL === baseApiAddress && !config.headers.Authorization) {
      const token = getToken();

      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
    }

    return config;
  },
  error => Promise.reject(error)
);

Interceptor sepertinya solusi paling elegan