web-dev-qa-db-de.com

Senden des Inhaber-Tokens mit Achsen

In meiner Reaktions-App verwende ich Axios , um die REST API-Anforderungen auszuführen.

Es ist jedoch nicht möglich, den Authorization Header mit der Anfrage zu senden.

Hier ist mein 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()
}

Hier würde die validToken() -Methode einfach das Token aus dem Browserspeicher zurückgeben.

Alle Anfragen erhalten eine 500-Fehler-Antwort, die dies anzeigt

Das Token konnte nicht aus der Anforderung analysiert werden

vom Back-End.

Wie wird der Autorisierungsheader bei jeder Anfrage gesendet? Würden Sie ein anderes Modul empfehlen mit zu reagieren?

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

Der erste Parameter ist die URL.
Der zweite ist der JSON-Body, der zusammen mit Ihrer Anfrage gesendet wird.
Der dritte Parameter sind (unter anderem) die Überschriften. Welches ist JSON auch.

55
Doctor

Hier finden Sie eine einzigartige Möglichkeit, das Autorisierungstoken in Axios festzulegen. Das Festlegen der Konfiguration für jeden Axios-Aufruf ist keine gute Idee. Sie können das Standardautorisierungstoken folgendermaßen ändern:

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

Bearbeiten

Für einige APIs muss Bearer als Bearer geschrieben sein. Sie können also Folgendes tun:

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

Jetzt müssen Sie nicht mehr für jeden API-Aufruf eine Konfiguration festlegen. Jetzt wird für jeden Axios-Aufruf ein Autorisierungstoken festgelegt.

27
Ilyas karim

Der zweite Parameter von axios.post ist data (nicht config). config ist der dritte Parameter. Weitere Informationen finden Sie hier: https://github.com/mzabriskie/axios#axiosposturl-data-config

22
Nick Uraltsev

Sie können die Konfiguration einmal erstellen und überall verwenden.

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

Mit Axios Interceptor:

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

Wenn Sie nach der Übergabe des Tokens im Header einige Daten möchten, versuchen Sie diesen 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

Dies funktioniert und ich muss den Token nur einmal in meinem app.js Setzen:

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

Dann kann ich Anfragen in meinen Komponenten stellen, ohne den Header erneut zu setzen.

"axios": "^0.19.0",

0
gdfgdfg