Envoi du jeton porteur avec axios

Question

Dans mon application react, j'utilise axios pour effectuer les requêtes REST api.

Mais il est incapable d'envoyer le Autorisation avec la demande.

Voici mon code :

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

Ici, le validToken() renvoie simplement le jeton depuis le stockage du navigateur.

Toutes les demandes reçoivent une réponse d'erreur 500 indiquant que

Le jeton n'a pas pu être analysé à partir de la demande.

depuis le back-end.

Comment envoyer l'en-tête d'autorisation avec chaque demande ? Recommandez-vous un autre module avec react ?

Answer 1

const config = {
    headers: { Authorization: `Bearer ${token}` }
};

const bodyParameters = {
   key: "value"
};

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then(console.log).catch(console.log);

Le premier paramètre est l'URL.
Le second est le corps JSON qui sera envoyé avec votre requête.
Le troisième paramètre est constitué des en-têtes (entre autres). Qui est aussi JSON.

Answer 2

Voici une façon unique de définir le jeton d'autorisation dans axios. Définir la configuration à chaque appel axios n'est pas une bonne idée et vous pouvez changer le jeton d'autorisation par défaut par :

import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

Modifier Merci à Jason Norwood-Young.

Certaines API exigent que bearer soit écrit comme Bearer, donc vous pouvez le faire :

axios.defaults.headers.common = {'Authorization': `Bearer ${token}`}

Désormais, vous n'avez plus besoin de définir la configuration à chaque appel d'API. Maintenant, le jeton d'autorisation est défini à chaque appel axios.

Answer 3

Vous pouvez créer une configuration une fois et l'utiliser partout.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

Answer 4

Le deuxième paramètre de axios.post est data (pas config ). config est le troisième paramètre. Veuillez consulter ce document pour plus de détails : https://github.com/mzabriskie/axios#axiosposturl-data-config

Answer 5

Si vous voulez obtenir des données après avoir passé un jeton dans l'en-tête, essayez ce code.

const api = 'your api'; 
const token = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id; /*take only token and save in token variable*/
axios.get(api , { headers: {"Authorization" : `Bearer ${token}`} })
.then(res => {
console.log(res.data);
.catch((error) => {
  console.log(error)
});