Senden des Inhaber-Tokens mit Axios

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

Es ist jedoch nicht möglich, den Autorisierungsheader mit der Anforderung 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 haben eine 500-Fehlerantwort, die dies besagt

Das Token konnte nicht aus der Anforderung analysiert werden

vom Backend.

Wie sende ich den Autorisierungsheader bei jeder Anfrage? Würden Sie ein anderes Modul mit reagieren empfehlen?

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

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

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

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

Bearbeiten , danke an Jason Norwood-Young.

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

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

Jetzt müssen Sie nicht mehr für jeden API-Aufruf die Konfiguration festlegen. Jetzt wird das Autorisierungstoken auf jeden Axios-Aufruf gesetzt.

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

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

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

Wenn Sie nach der Übergabe des Tokens im Header einige Daten speichern 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)
});

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

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

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

"axios": "^0.19.0",

axiosAn sich gibt es zwei nützliche "Methoden", die nur Mittel interceptorszwischen der Anfrage und der Antwort sind. Wenn Sie also bei jeder Anfrage das Token senden möchten. Verwenden Sie die interceptor.request.

Ich habe ein Paket gemacht, das dir hilft:

$ npm i axios-es6-class

Jetzt können Sie Axios als Klasse verwenden

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

Ich meine, die Implementierung von middlewarehängt von Ihnen ab, oder wenn Sie es vorziehen, Ihr eigenes axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a zu erstellen , ist es das Medium Post, woher es kam

Dies ist, was ich auch konfrontiert. Das Token, das Sie übergeben, ist nicht korrekt.

Einfach den Token fest codieren und weitergeben, Sie erhalten die richtige Antwort. Wenn das Token jedoch nicht in einfachen Anführungszeichen übergeben wird, schlägt es mit Sicherheit fehl. Es muss das Format 'Autorisierung' haben: 'Träger YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ', wobei nach dem Träger ein Leerzeichen vorhanden sein muss, auch innerhalb von einfachen Anführungszeichen, auch innerhalb des Anführungszeichens muss ein Leerzeichen vorhanden sein.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: Der obige Code wird funktionieren. Aber wenn Sie etwas posten wie:

'Autorisierung': 'Inhaber' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, es wird fehlschlagen

oder ----- der folgende Code wird auch fehlschlagen, ich hoffe du verstehst den grundlegenden Unterschied

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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