Axios: Mettre à jour les en-têtes d'authentification à chaque requête ?

J'ai un cas d'utilisation similaire où ce serait formidable si les en-têtes transmis étaient évalués paresseusement pour chaque demande.

Pensée:
Au lieu de passer le hachage des en-têtes avec empressement en tant qu'objet ( axios.create({headers: {...}}) nous pourrions passer une fonction qui renvoie les en-têtes ( axios.create({headers: () => {...}} ) qui seraient évalués avant l'envoi de la requête.

Qu'en penses-tu?
Edit : Ceci est une proposition, je ne pense pas que cela fonctionne pour le moment.

Je suis tombé sur le même cas d'utilisation. Ce que j'ai fini par faire à court terme, c'est d'utiliser la fonction transformRequest . Certainement un hack et j'adorerais aider à mettre en œuvre une approche de chargement paresseux appropriée dans la base de code.

Voir ci-dessous pour l'extrait de code. auth() obtient le jeton de l'utilisateur connecté s'il est disponible.

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

J'ai utilisé des intercepteurs à cette fin. Si l'URL de base de la demande correspond à mon API, j'ajoute l'en-tête auth (pour empêcher l'envoi d'informations d'identification à des tiers). Ceci est exécuté à chaque demande, donc si le jeton change (par exemple à la suite d'une actualisation du jeton), la demande suivante récupère le nouveau jeton. Je m'assure également de vérifier les valeurs existantes dans la demande pour permettre le remplacement de l'en-tête du site d'appel si cela s'avérait nécessaire pour une raison quelconque.

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 pouvez-vous me montrer la méthode getToken() ? Stockez-vous votre jeton dans localStorage ou AsyncStorage (React Native) ? Merci d'avance!

J'ai fini avec ça.

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

Je ne sais pas si cela fonctionne dans tous les cas.

Mon fichier 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;

Mon magasin, une simple "classe" get/set

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')
    }

  }

Mon service utilisateur "classe":

import http from './http'

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

et enfin, mon implémentation :

import {user} from '@/services'

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

d'ailleurs, process.env.VUE_APP_ROOT_API et @/services sont des choses de Vue...

Résultat:

@danielschmitz merci pour cet exemple !!

On dirait que vous avez tous compris cela et que ce n'est pas un bug, alors je ferme ça 🙂

J'ai trouvé utile d'envelopper l'intercepteur dans async/wait pour m'assurer que mon jeton était défini avant le déclenchement de l'appel d'API :

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);
  }
);

J'ai utilisé des intercepteurs à cette fin. Si l'URL de base de la demande correspond à mon API, j'ajoute l'en-tête auth (pour empêcher l'envoi d'informations d'identification à des tiers). Ceci est exécuté à chaque demande, donc si le jeton change (par exemple à la suite d'une actualisation du jeton), la demande suivante récupère le nouveau jeton. Je m'assure également de vérifier les valeurs existantes dans la demande pour permettre le remplacement de l'en-tête du site d'appel si cela s'avérait nécessaire pour une raison quelconque.

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 semble être la solution la plus élégante