Wysyłanie tokena okaziciela z axiosami

120

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ą?

rakibtg
źródło
Nie sądzę, że to axiosw ogóle problem. sprawdź swoją validToken()funkcję, zwraca coś, czego serwer nie rozumie.
xiaofan2406
Podwójnie sprawdziłem funkcję i również użyłem tutaj ciągu tokena zamiast funkcji, nadal to samo
rakibtg

Odpowiedzi:

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

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.

Lekarz
źródło
4
Przegapiłeś spację między okazicielem a tokenem - wtedy zadziała.
grudzień
W poście lekarza: „klucz:„ wartość ”zawiera cytat, który powinien zostać usunięty ... Ale naprawienie tego spowodowało, że
autoryzacja
1
@mediaguru Thx za komentarz. Naprawiłem to (chyba)! Cytat musiał zostać wprowadzony przez kogoś edytującego odpowiedź ...
Doktor
2
Bearernależy używać z dużym B, prawda?
Alizadeh118
1
@ Alizadeh118 Tak, zgodnie ze specyfikacją HTTP. Ale wiele interfejsów API nie nalega na prawidłową wielkość liter.
OneHoopyFrood
64

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:

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

Edytuj , dzięki Jason Norwood-Young.

Niektóre API wymagają, aby nośnik był napisany jako Bearer, więc możesz:

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

Teraz nie musisz ustawiać konfiguracji dla każdego wywołania API. Teraz token autoryzacji jest ustawiany na każde wywołanie axios.

Ilyas karim
źródło
18
Bearerw przypadku niektórych interfejsów API należy używać wielkich liter (odkryłem na własnej skórze).
Jason Norwood-Young
24

Możesz stworzyć konfigurację raz i używać jej wszędzie.

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
źródło
Skąd jest wartość przekazanego tokenu w tym przykładzie? W przypadku mojej aplikacji token byłby przekazywany z powrotem do interfejsu API w nagłówku lub treści po pomyślnym zalogowaniu.
Ken
jest tutajheaders: {'Authorization': 'Bearer '+token}
M. Suleman Khan
Jak przekazać dane, jeśli jest to żądanie POST
M. Suleman Khan
Dla tych, którzy zastanawiają się, skąd można przekazać wartość tokena, oto składnia es6 -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Jeet
19

Używając przechwytywacza Axios:

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
źródło
1
Czy to jest standard społeczności dla konfigurowania nagłówków z axios?
5ervant
@ 5ervant Miałem naprawdę brzydki czas stosując to podejście. To było bardzo bolesne, więc nie polecam tego.
ankush981
@ ankush981 co jest takiego złego w tym podejściu i które z nich polecasz?
Nenad Kaevik
1
@NenadKaevik Istnieje szczególny przypadek użycia, który próbowałem omówić (przechwycenie odpowiedzi): powiadomienie użytkownika, kiedy serwer powie 403 w odpowiedzi. Ludzie zazwyczaj umieszczają krok weryfikacji tokenu podczas ładowania komponentu, ale przypuśćmy, że twój token został unieważniony kilka sekund po zweryfikowaniu (z dowolnego powodu). Teraz, gdy osoba kliknie przycisk, chcę, żeby wiedziała, że ​​została wylogowana. Trudno to zrobić za pomocą przechwytywaczy, ponieważ dodają one globalne zachowanie.
Wpadłem w
@NenadKaevik Być może przepływ był trudny do osiągnięcia lub użyłem niewłaściwego podejścia, ale od tego czasu zacząłem nienawidzić przechwytywaczy.
ankush981
9

Jeśli chcesz jakieś dane po przekazaniu tokena w nagłówku to spróbuj tego kodu

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
źródło
2

To działa i muszę ustawić token tylko raz w moim app.js:

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

Następnie mogę wysyłać żądania w moich komponentach bez ponownego ustawiania nagłówka.

"axios": "^0.19.0",

gdfgdfg
źródło
Nie wiem dlaczego, ale w ten sposób nie działa na Safari na urządzeniu z iOS :(
ZecKa
0

axiossam w sobie zawiera dwie przydatne "metody", interceptorsktó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żyj interceptor.request.

Zrobiłem pakiet, który ci pomoże:

$ npm i axios-es6-class

Teraz możesz użyć axios jako klasy

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

Chodzi mi o implementację middlewarezależy od Ciebie lub jeśli wolisz stworzyć własne axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a to jest to medium napisz, skąd pochodzi

Ernesto
źródło
-4

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.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

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ę

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};
Athar
źródło