Wysyłanie tokena okaziciela z axiosami

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

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.

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.

Drugi parametr axios.postto data(nie config). configto trzeci parametr. Zobacz to, aby uzyskać szczegółowe informacje: https://github.com/mzabriskie/axios#axiosposturl-data-config

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

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

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

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

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

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