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?
axios
Problem ist. Überprüfen Sie IhrevalidToken()
Funktion. Sie gibt etwas zurück, das Ihr Server nicht versteht.Antworten:
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.
quelle
Bearer
sollte mit Kapital B verwendet werden, nicht wahr?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:
Bearbeiten , danke an Jason Norwood-Young.
Für einige APIs muss Bearer als Bearer geschrieben sein, damit Sie Folgendes tun können:
Jetzt müssen Sie nicht mehr für jeden API-Aufruf die Konfiguration festlegen. Jetzt wird das Autorisierungstoken auf jeden Axios-Aufruf gesetzt.
quelle
Bearer
muss für einige APIs groß geschrieben werden (ich habe den harten Weg entdeckt).Der zweite Parameter von
axios.post
istdata
(nichtconfig
).config
ist der dritte Parameter. Weitere Informationen finden Sie hier: https://github.com/mzabriskie/axios#axiosposturl-data-configquelle
Sie können die Konfiguration einmal erstellen und überall verwenden.
quelle
headers: {'Authorization': 'Bearer '+token}
const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Mit Axios Interceptor:
quelle
Wenn Sie nach der Übergabe des Tokens im Header einige Daten speichern möchten, versuchen Sie diesen Code
quelle
Dies funktioniert und ich muss das Token nur einmal in meinem
app.js
:Dann kann ich Anforderungen in meinen Komponenten stellen, ohne den Header erneut zu setzen.
"axios": "^0.19.0",
quelle
axios
An sich gibt es zwei nützliche "Methoden", die nur Mittelinterceptors
zwischen der Anfrage und der Antwort sind. Wenn Sie also bei jeder Anfrage das Token senden möchten. Verwenden Sie dieinterceptor.request
.Ich habe ein Paket gemacht, das dir hilft:
Jetzt können Sie Axios als Klasse verwenden
Ich meine, die Implementierung von
middleware
hängt von Ihnen ab, oder wenn Sie es vorziehen, Ihr eigenesaxios-es6-class
https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a zu erstellen , ist es das Medium Post, woher es kamquelle
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.
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
quelle