Senden des Inhaber-Tokens mit Axios

114

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?

rakibtg
quelle
Ich denke nicht, dass es überhaupt ein axiosProblem ist. Überprüfen Sie Ihre validToken()Funktion. Sie gibt etwas zurück, das Ihr Server nicht versteht.
Xiaofan2406
Ich habe die Funktion noch einmal überprüft und hier auch die Token-Zeichenfolge anstelle der Funktion verwendet, immer noch dieselbe
rakibtg

Antworten:

135
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.

Arzt
quelle
4
Sie haben ein Leerzeichen zwischen Träger und Token verpasst - dann wird es funktionieren.
Dezember
Arztbeitrag: "Schlüssel:" Wert "hat ein Zitat, das entfernt werden sollte ... Aber das Korrigieren, das die Authentifizierung dazu brachte, für meine
reaktionsnative
1
@mediaguru Danke für den Kommentar. Ich habe es repariert (nehme ich an)! Das Zitat muss von jemandem eingeführt worden sein, der die Antwort bearbeitet ...
Doktor
2
Bearersollte mit Kapital B verwendet werden, nicht wahr?
Alizadeh118
1
@ Alizadeh118 Ja, gemäß der HTTP-Spezifikation. Aber viele APIs bestehen nicht auf der richtigen Großschreibung.
OneHoopyFrood
59

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.

Ilyas Karim
quelle
18
Bearermuss für einige APIs groß geschrieben werden (ich habe den harten Weg entdeckt).
Jason Norwood-Young
22

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;
})
Sarvar Nishonboev
quelle
Woher kommt in diesem Beispiel der Wert des Tokens? Für meine Anwendung wird das Token nach erfolgreicher Anmeldung entweder im Header oder im Body an die API zurückgegeben.
Ken
Es ist hierheaders: {'Authorization': 'Bearer '+token}
M. Suleman Khan
Wie man Daten
weitergibt,
Für diejenigen, die sich fragen, woher der Wert des Tokens übergeben werden kann, ist hier die es6-Syntax -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Jeet
18

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);
  }
);
aneesh
quelle
1
Ist dies der Community-Standard für die Konfiguration der Header mit Axios?
5ervant
@ 5ervant Ich hatte eine wirklich hässliche Zeit mit diesem Ansatz. Es war sehr schmerzhaft und ich kann es nicht empfehlen.
ankush981
@ ankush981 was ist so schlimm an diesem Ansatz und welchen empfehlen Sie?
Nenad Kaevik
1
@NenadKaevik Es gibt einen bestimmten Anwendungsfall, den ich behandeln wollte (Abfangen von Antworten): Den Benutzer wissen lassen, wenn der Server 403 als Antwort sagt. Im Allgemeinen wird der Token-Überprüfungsschritt während des Ladens der Komponenten ausgeführt. Angenommen, Ihr Token wurde einige Sekunden nach der Überprüfung ungültig (aus welchem ​​Grund auch immer). Wenn die Person auf einen Knopf klickt, möchte ich, dass sie weiß, dass sie abgemeldet wurde. Es ist schwierig, dies mit Interceptors zu tun, da sie globales Verhalten hinzufügen. Ich geriet in eine Reload-Schleife, weil der Anforderungs-Interceptor immer das Token hinzufügte und der Antwort-Interceptor umleitete
ankush981
@NenadKaevik Also, vielleicht war der Fluss schwer zu erreichen oder ich habe den falschen Ansatz verwendet, aber seitdem habe ich angefangen, Abfangjäger zu hassen.
ankush981
9

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

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",

gdfgdfg
quelle
Ich weiß nicht warum, aber auf diese Weise funktioniert es nicht auf Safari auf iOS-Gerät :(
ZecKa
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

Ernesto
quelle
-4

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"
};
Athar
quelle