W mojej aplikacji do reagowania używam Axios do wykonywania żądań REST API.
Ale nie można wysłać nagłówka Authorization z żądaniem.
Oto mój kod:
tokenPayload() {
let config = {
headers: {
'Authorization': 'Bearer ' + validToken()
}
}
Axios.post(
'http://localhost:8000/api/v1/get_token_payloads',
config
)
.then( ( response ) => {
console.log( response )
} )
.catch()
}
Tutaj validToken()
metoda po prostu zwróci token z pamięci przeglądarki.
Wszystkie żądania mają odpowiedź o błędzie 500, mówiącą o tym
Nie można przeanalizować tokenu z żądania
od zaplecza.
Jak wysłać nagłówek autoryzacji z każdym żądaniem? Czy poleciłbyś jakiś inny moduł z odpowiedzią?
axios
w ogóle problem. sprawdź swojąvalidToken()
funkcję, zwraca coś, czego serwer nie rozumie.Odpowiedzi:
Pierwszym parametrem jest adres URL.
Drugi to treść JSON, która zostanie wysłana wraz z Twoim żądaniem.
Trzecim parametrem są (między innymi) nagłówki. Co też jest JSON.
źródło
Bearer
należy używać z dużym B, prawda?Oto unikalny sposób ustawiania tokena autoryzacji w axios. Ustawienie konfiguracji dla każdego wywołania axios nie jest dobrym pomysłem i możesz zmienić domyślny token autoryzacji poprzez:
Edytuj , dzięki Jason Norwood-Young.
Niektóre API wymagają, aby nośnik był napisany jako Bearer, więc możesz:
Teraz nie musisz ustawiać konfiguracji dla każdego wywołania API. Teraz token autoryzacji jest ustawiany na każde wywołanie axios.
źródło
Bearer
w przypadku niektórych interfejsów API należy używać wielkich liter (odkryłem na własnej skórze).Drugi parametr
axios.post
todata
(nieconfig
).config
to trzeci parametr. Zobacz to, aby uzyskać szczegółowe informacje: https://github.com/mzabriskie/axios#axiosposturl-data-configźródło
Możesz stworzyć konfigurację raz i używać jej wszędzie.
źródło
headers: {'Authorization': 'Bearer '+token}
const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Używając przechwytywacza Axios:
źródło
Jeśli chcesz jakieś dane po przekazaniu tokena w nagłówku to spróbuj tego kodu
źródło
To działa i muszę ustawić token tylko raz w moim
app.js
:Następnie mogę wysyłać żądania w moich komponentach bez ponownego ustawiania nagłówka.
"axios": "^0.19.0",
źródło
axios
sam w sobie zawiera dwie przydatne "metody",interceptors
które są niczym innym jak oprogramowaniem pośredniczącym między żądaniem a odpowiedzią. więc jeśli na każde żądanie chcesz wysłać token. Użyjinterceptor.request
.Zrobiłem pakiet, który ci pomoże:
Teraz możesz użyć axios jako klasy
Chodzi mi o implementację
middleware
zależy od Ciebie lub jeśli wolisz stworzyć własneaxios-es6-class
https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a to jest to medium napisz, skąd pochodziźródło
Z tym też miałem do czynienia. Token, który przekazujesz, jest nieprawidłowy.
Po prostu zakoduj token i przepuść, otrzymasz poprawną odpowiedź. Ale jeśli token nie zostanie przekazany w pojedynczym cudzysłowie '', to na pewno się nie powiedzie. Musi być w formacie „Authorization”: „Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ”, gdzie po okazicielu musi znajdować się jedna spacja, również w środku jest bardzo ważny cudzysłów.
IMP: Powyższy kod zadziała, ale jeśli napiszesz coś takiego:
'Autoryzacja': 'Bearer' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, to się nie powiedzie
lub ----- poniższy kod również się nie powiedzie, mam nadzieję, że rozumiesz podstawową różnicę
źródło