Envoi du jeton porteur avec axios

Dans mon application React, j'utilise axios pour exécuter les requêtes API REST.

Mais il ne peut pas envoyer l'en- tête d' 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, la validToken()méthode renvoie simplement le jeton du stockage du navigateur.

Toutes les demandes ont une réponse d'erreur de 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? Recommanderiez-vous un autre module avec react?

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 demande.
Le troisième paramètre sont les en-têtes (entre autres). Ce qui est également JSON.

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

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

Edit , merci à Jason Norwood-Young.

Certaines API exigent que le porteur soit écrit en tant que porteur, vous pouvez donc faire:

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

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

Le deuxième paramètre de axios.postest data(non config). configest le troisième paramètre. Veuillez consulter ceci pour plus de détails: https://github.com/mzabriskie/axios#axiosposturl-data-config

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

En utilisant l'intercepteur Axios:

const service = axios.create({
  timeout: 20000 // request timeout
});

// request interceptor

service.interceptors.request.use(
  config => {
    // Do something before request is sent

    config.headers["Authorization"] = "bearer " + getToken();
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

Si vous voulez des données après avoir passé le 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)
});

Cela fonctionne et je n'ai besoin de définir le jeton qu'une seule fois dans mon app.js:

axios.defaults.headers.common = {
    'Authorization': 'Bearer ' + token
};

Ensuite, je peux faire des requêtes dans mes composants sans redéfinir l'en-tête.

"axios": "^0.19.0",

axiosen lui-même vient avec deux «méthodes» utiles interceptorsqui ne sont que des middlewares entre la requête et la réponse. donc si à chaque demande vous souhaitez envoyer le token. Utilisez le interceptor.request.

J'ai fait un pack qui vous aide:

$ npm i axios-es6-class

Vous pouvez maintenant utiliser axios comme classe

export class UserApi extends Api {
    constructor (config) {
        super(config);

        // this middleware is been called right before the http request is made.
        this.interceptors.request.use(param => {
            return {
                ...param,
                defaults: {
                    headers: {
                        ...param.headers,
                        "Authorization": `Bearer ${this.getToken()}`
                    },
                }
            }
        });

      this.login = this.login.bind(this);
      this.getSome = this.getSome.bind(this);
   }

   login (credentials) {
      return this.post("/end-point", {...credentials})
      .then(response => this.setToken(response.data))
      .catch(this.error);
   }


   getSome () {
      return this.get("/end-point")
      .then(this.success)
      .catch(this.error);
   }
}

Je veux dire que la mise en œuvre du middlewaredépend de vous, ou si vous préférez créer votre propre axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a c'est le support poster d'où il vient

C'est ce à quoi j'ai également été confronté. Le jeton que vous passez n'est pas correct.

Il suffit de coder en dur le jeton et de le transmettre, vous obtiendrez la réponse correcte. Mais si le jeton n'est pas passé entre guillemets simples '', il échouera sûrement. Il doit être au format 'Autorisation': 'Porteur YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', où après le porteur un espace doit être présent, également entre des guillemets simples très importants.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};

IMP: Le code ci-dessus fonctionnera Mais si vous publiez quelque chose comme:

'Autorisation': 'Bearer' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, cela échouera

ou ----- le code ci-dessous échouera également, j'espère que vous comprenez la différence fondamentale

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};