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


118

У своїй програмі реагування я використовую 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 помилок, яка говорить про це

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

з бек-енду.

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


Я взагалі не думаю, що це axiosпитання. перевірте свою validToken()функцію, вона повертає те, що ваш сервер не розуміє.
xiaofan2406

Я двічі перевірив функцію, а також використав тут рядок токена замість функції ,, все одно
rakibtg

Відповіді:


140
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.


4
Ви пропустили пробіл між носієм і маркером - тоді він спрацює.
грудня

Повідомлення лікаря: "ключ:" значення "має цитату, яку слід видалити ... Але виправлення, яке
змусило автору

1
@mediaguru Thx для коментаря. Я це виправив (я гадаю)! Цитату, мабуть, ввів хтось, хто редагував відповідь ...
Доктор

2
Bearerслід використовувати з капіталом B, чи не так?
Alizadeh118

1
@ Alizadeh118 Так, згідно специфікації HTTP Але багато api не наполягають на правильній капіталізації.
OneHoopyFrood

60

Ось унікальний спосіб встановлення маркера авторизації в 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.


18
Bearerпотрібно використовувати великі літери для деяких API (я виявив важкий шлях).
Джейсон Норвуд-Янг


23

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

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

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

Звідки в цьому прикладі передано значення лексеми? У моєму застосуванні маркер буде переданий назад в api або в заголовку, або в тілі після успішного входу.
Кен

його тутheaders: {'Authorization': 'Bearer '+token}
Сулеман Хан

Як передавати дані, якщо це запит POST
Сулеман Хан

Для тих , хто задається питанням, звідки значення маркера може бути переданий, тут ES6 синтаксис -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Джіт

18

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

1
Це стандарт спільноти для налаштування заголовків з аксіосами?
5ervant

@ 5ervant У мене був дуже потворний час, використовуючи цей підхід. Було сильно боліти, і тому я його не рекомендую.
ankush981

@ ankush981, що так погано в цьому підході і який ти рекомендуєш?
Ненад Каевік

1
@NenadKaevik Є особливий випадок використання, який я намагався прикрити (перехоплення відповідей): сповіщення користувача, коли сервер каже 403 у відповідь. Люди зазвичай ставлять крок перевірки маркера під час завантаження компонента, але, припустимо, ваш маркер був визнаний недійсним через кілька секунд після його перевірки (з будь-якої причини). Тепер, коли людина натискає кнопку, я хотів би, щоб вони знали, що вони вийшли з системи. Це важко зробити за допомогою перехоплювачів, оскільки вони додають глобальної поведінки. Я потрапив у цикл перезавантаження, тому що перехоплювач запиту завжди додасть маркер, а перехоплювач відповіді буде перенаправляти
ankush981

@NenadKaevik Отже, можливо, потоку було важко досягти, або я використовував неправильний підхід, але відтоді я почав ненавидіти перехоплювачів.
ankush981

9

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

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

2

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

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

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

"axios": "^0.19.0",


Я не знаю, чому, але таким чином це не працює на Safari на пристрої iOS :(
ZecKa

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, це середовище посаду, звідки вона прийшла


-4

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

Просто ввімкніть маркер і перейдіть, ви отримаєте правильну відповідь. Але якщо маркер не буде передано в одній цитаті '', то він, безумовно, вийде з ладу. Він повинен бути у форматі "Авторизація": "Носій 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"
};
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.