web-dev-qa-db-fra.com

Envoi du jeton porteur avec axios

Dans mon application de réaction, j'utilise axios pour effectuer les demandes REST api.

Mais il est impossible d'envoyer l'en-tête Authorization avec la requête.

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 méthode validToken() renverrait simplement le jeton depuis la mémoire du navigateur.

Toutes les demandes ont une réponse d'erreur 500 indiquant que

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

à partir du back-end.

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

reactjsresttokenaxiosaccess-token
54
rakibtg
var config = {
    headers: {'Authorization': "bearer " + token}
};

var bodyParameters = {
   key: "value"
}

Axios.post( 
  'http://localhost:8000/api/v1/get_token_payloads',
  bodyParameters,
  config
).then((response) => {
  console.log(response)
}).catch((error) => {
  console.log(error)
});

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

55
Doctor

Voici un moyen 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 comme suit:

const axios = require('axios');
axios.defaults.baseURL = 'http://localhost:1010/'
axios.defaults.headers.common = {'Authorization': `bearer ${token}`}
export default axios;

Éditer

Certaines API nécessitent que le porteur soit écrit porteur, vous pouvez donc:

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

Maintenant, vous n'avez pas besoin de définir la configuration pour chaque appel d'API. Le jeton d'autorisation est maintenant défini pour chaque appel axios.

27
Ilyas karim

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

22
Nick Uraltsev

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;
})
11
Sarvar Nishonboev

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

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)
});
5
Neel Patel

Cela fonctionne et je dois définir le jeton 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",

0
gdfgdfg