Надіслати маркер носія з аксіосами

У своїй програмі реагування я використовую axios для виконання запитів RIP api.

Але він не може надіслати заголовок авторизації із запитом.

Ось мій код:

tokenPayload() {
  let config = {
    headers: {
      'Authorization': 'Bearer ' + validToken()
    }
  }
  Axios.post( 
      'http://localhost:8000/api/v1/get_token_payloads',
      config
    )
    .then( ( response ) => {
      console.log( response )
    } )
    .catch()
}

Тут validToken()метод просто поверне маркер зі сховища браузера.

Усі запити мають відповідь 500 помилок, яка говорить про це

Не вдалося розібрати маркер із запиту

з бек-енду.

Як надіслати заголовок авторизації з кожним запитом? Чи рекомендуєте ви будь-який інший модуль з реакцією?

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

Перший параметр - URL.
Другий - орган JSON, який буде надісланий за вашим запитом.
Третій параметр - заголовки (серед іншого). Який також JSON.

Ось унікальний спосіб встановлення маркера авторизації в axios. Налаштування конфігурації для кожного виклику axios не є гарною ідеєю, і ви можете змінити маркер авторизації за замовчуванням шляхом:

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

Редагуйте , завдяки Джейсону Норвуду-Янгу.

Деякі API вимагають, щоб провідник був записаний як носій, тому ви можете зробити:

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

Тепер вам не потрібно встановлювати конфігурацію для кожного дзвінка API. Тепер маркер авторизації встановлюється для кожного виклику axios.

Другий параметр axios.post- data(не config). configє третім параметром. Будь ласка, дивіться це для детальної інформації: https://github.com/mzabriskie/axios#axiosposturl-data-config

Ви можете створити конфігурацію один раз і використовувати її всюди.

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'Authorization': 'Bearer '+token}
});

instance.get('/path')
.then(response => {
    return response.data;
})

За допомогою перехоплювача 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);
  }
);

Якщо ви хочете отримати деякі дані після передачі маркера в заголовок, спробуйте цей код

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

Це працює, і мені потрібно встановити маркер лише один раз у моєму app.js:

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

Тоді я можу робити запити в своїх компонентах, не встановлюючи знову заголовок.

"axios": "^0.19.0",

axiosсам по собі поставляється з двома корисними "методами", interceptorsякі є не середнім проміжком між запитом та відповіддю. тому якщо на кожен запит потрібно надіслати маркер. Використовуйте interceptor.request.

Я зробив пакунок, який допомагає вам:

$ npm i axios-es6-class

Тепер ви можете використовувати axios як клас

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

Я маю на увазі реалізацію middlewareзалежить від вас, або якщо ви віддаєте перевагу створити свій власний axios-es6-class https://medium.com/@enetoOlveda/how-to-use-axios-typescript-like-a-pro-7c882f71e34a, це середовище посаду, звідки вона прийшла

З цим я також стикався. Маркер, який ви передаєте, невірний.

Просто ввімкніть маркер і перейдіть, ви отримаєте правильну відповідь. Але якщо маркер не буде передано в одній цитаті '', то він, безумовно, вийде з ладу. Він повинен бути у форматі "Авторизація": "Носій YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ", після того, як після носія повинен бути присутній один простір, а також всередині цього синглу, присутнім цей сингл.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: Вищенаведений код буде працювати, але якщо ви опублікуєте щось на кшталт:

'Авторизація': 'Носій' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, це не вдасться

або ----- код нижче також не вдасться, я сподіваюся, що ви зрозумієте основну різницю

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

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