Отправка токена на предъявителя с аксиомами

120

В моем приложении для реагирования я использую axios для выполнения запросов REST 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, в котором говорится, что

Токен не может быть проанализирован из запроса

из серверной части.

Как отправлять заголовок авторизации при каждом запросе? Вы бы порекомендовали какой-либо другой модуль с React?

Rakibtg
источник
Я не думаю, что это axiosвообще проблема. проверьте свою validToken()функцию, она возвращает то, что ваш сервер не понимает.
xiaofan2406 06
Я дважды проверил функцию и также использовал здесь строку токена вместо функции, все то же самое
rakibtg 06

Ответы:

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

Первый параметр - это URL.
Второй - это тело JSON, которое будет отправлено вместе с вашим запросом.
Третий параметр - заголовки (помимо прочего). Это тоже JSON.

Доктор
источник
4
Вы пропустили пробел между предъявителем и токеном - тогда он сработает.
Декабрь
В сообщении доктора: "key:" value "есть цитата, которую следует удалить ... Но исправление
заставило
1
@mediaguru Спасибо за комментарий. Я исправил (полагаю)! Цитата, должно быть, была введена кем-то, редактирующим ответ ...
Доктор
2
Bearerследует использовать с большой буквы, не так ли?
Alizadeh118
1
@ Alizadeh118 Да, согласно спецификации HTTP. Но многие api не настаивают на правильном использовании заглавных букв.
OneHoopyFrood
64

Вот уникальный способ установки токена авторизации в 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 (я обнаружил на собственном горьком опыте).
Джейсон Норвуд-Янг
24

Вы можете создать конфиг один раз и использовать его везде.

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}
M.suleman Khan
Как передать данные, если это POST-запрос
Сулеман Хан
Для тех, кому интересно, откуда может быть передано значение токена, вот синтаксис es6 -const instance = (token) => axios.create({ baseURL: `${config.API_URL}`, timeout: 1000, headers :{ 'authorization': 'Bearer ' + token } })
Джит
19

Используя перехватчик 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
Это стандарт сообщества для настройки заголовков с помощью axios?
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",

gdfgdfg
источник
Я не знаю почему, но таким образом он не работает в 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

С этим я тоже столкнулся. Токен, который вы передаете, неверен.

Просто закодируйте токен и пройдите, вы получите правильный ответ. Но если токен не будет передан в одинарных кавычках '', то он обязательно выйдет из строя. Он должен быть в формате «Авторизация»: «Bearer YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ», где после Bearer должны присутствовать одни очень важные одинарные кавычки.

var token = "YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ";

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

IMP: приведенный выше код будет работать, но если вы разместите что-то вроде:

'Авторизация': 'Bearer' + YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjVlOTQ5YMmQ5ZjMwYjA0YmEzZmZjN2I1MmI4MDJkNQ, он завершится ошибкой

или ----- приведенный ниже код также не сработает, я надеюсь, вы понимаете основную разницу

var token = YzE5ZTdiMjVlYzM5NjA2MGJkZTM5NjA0YmEzZmZjN2I1MmI4MDJkNQ;

var headers = {
  Authorization: "Bearer " + token,
  Accept: "application/json, text/plain, */*",
  "Content-Type": "application/json"
};
Атар
источник