web-dev-qa-db-fra.com

Comment passer l'en-tête JWT Token avec Axios et React?

Je fais une application web avec React, Express, MongoDB.

Et, je veux passer le jeton jwt avec l'en-tête.

Mais, je le passe, obtenez une erreur 401 (non autorisée).

Dans login actions.js:

export function login(username, password) {
return function(dispatch) {
  axios
  .post(`${API_URL}/auth/login`, { username, password })
  .then(res => {
    dispatch(loginSuccess(res.data, username));
    const token = res.data.token;
    axios.defaults.headers.common["Authorization"] = token;
    history.Push("/");
  })
  .catch(err => {
    if (err.response.status === 401) {
      dispatch(loginFailure(err));
    }
  });
 };
}

Et, dans mon post.js dans le serveur:

getToken = function(headers) {
  if (headers && headers.authorization) {
    var parted = headers.authorization.split(" ");
      if (parted.length === 2) {
       return parted[1];
      } else {
       return null;
      }
    } else {
     return null;
    }
 };
...
// Save Post
router.post("/", passport.authenticate("jwt", { session: false }), 
 function(
  req,
  res,
  next
  ) {
 var token = getToken(req.headers);
 if (token) {
   Post.create(req.body, function(err, post) {
     if (err) return next(err);
      res.json(post);
     });
   } else {
    return res.status(403).send({ success: false, msg: "Unauthorized." });
   }
});

Comment je le répare? + La connexion est un succès

mongodbreactjsexpressjwt
9
ko_ma

Tout d'abord, lorsque vous vous connectez et envoyez un nom d'utilisateur et un mot de passe au backend, en réponse, vous obtenez token_id. essayez maintenant de stocker des jetons dans session_storage et redirigez vers votre page de désir. maintenant vous prenez token_id dans votre page de désir et stockez une variable comme comme ..

let user = JSON.parse(sessionStorage.getItem('data'));
const token = user.data.id;

maintenant vous avez un jeton et passez l'en-tête et obtenez des données en réponse

const api = `your api here`
axios.get(api, { headers: {"Authorization" : `Bearer ${token}`} })
        .then(res => {
            console.log(res.data);
        this.setState({
            items: res.data,  /*set response data in items array*/
            isLoaded : true,
            redirectToReferrer: false
        })

note: vous devez définir le tableau des éléments vides dans setState initial comme comme

this.state={
            items:[],
            isLoaded: false,
            redirectToReferrer:false,
            token:''
        }
9
Neel Patel

Incluez votre jeton comme clé d'autorisation comme ci-dessous.

axios.post(url,data, {
    headers: {
        'authorization': your_token,
        'Accept' : 'application/json',
        'Content-Type': 'application/json'
    }
})
.then(response => {
    // return  response;
})
.catch((error) => {
    //return  error;
});
5
Sumit Kumar

comment-passer-en-tête-jeton-jwt-avec-axios-react ???

Ceci est un exemple pour créer une instance axios avec RL de base API et JWT_TOKEN globalement et y accéder pour différents appels API

étape 1: créer une instance statique pour axios

static axiosInstance =  axios.create({
    baseURL: "BASE_API_URL",
    timeout: 5000,
    headers: {
      'Authorization': "JWT_TOKEN",
      'Content-Type': 'application/json'
    }
  });

c'est le deuxième accès setep axiosInstance déjà créé et utilisé avec dynamic REST API calls

étape 2: accéder à l'instance statique et lier API_URL à l'URL de base

export const x = (data) => dispatch => {
    axiosInstance.post('API_URL',
        {
            PLAYLOAD
        })
        .then(function (response) {

        })
        .catch(function (error) {

        });
}

RL API = BASE_API_URL + API_URL et unique JWT_TOKEN pour tous et cela très propre, clair et fonctionnel.

1
BATMAN_

Essayez res.header ('x-auth', token) .send () 'x-auth' peut être n'importe quoi. Ci-dessus est utilisé pour définir le jeton dans les en-têtes

0
Shubham Agarwal Bhewanewala