Где я должен передать токен аутентификации на предъявителя в проекте React?

Question

У меня есть токен на предъявителя, и я не знаю, что с ним делать. Это React Project, и я использую Axios для получения данных из API. У меня вопрос, где этот токен идет? Должен ли я ставить его каждый раз, когда я использую Axios.get или я могу хранить его где-нибудь?

Answer 1

Вы должны указывать заголовки авторизации в каждом запросе. Обратитесь к этому ответу Отправка токена на предъявителя с помощью axios

Answer 2

Самый простой способ, которым вы можете добавить токен аутентификации на предъявителя к своему экземпляру axios, используя этот шаблон

 let api = axios.create({
      baseURL: YOUR_BASE_urL,
      timeout: 7000,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      }
    });

Наилучший способ - хранить токен аутентификации JWT в LocalStorage и метод записи, чтобы получить токен из localStorage и назначить егоЭкземпляр axios

function addToken() {
  api.defaults.headers.common['Authorization'] = !!localStorage.getItem('jwt') ? `Bearer ${localStorage.getItem('jwt')}` : '';
}

теперь у вас есть экземпляр и метод axios, с помощью которых вы можете получить токен из localStorage и назначить экземпляру axios

один оставленный шаг

Вам просто нужночтобы выполнить этот метод перед выполнением запроса к функции axios, выполните перед вызовом API

addToken()

или

Вы можете предпочесть непосредственное добавление токена к вашему экземпляру Axios

 let api = axios.create({
          baseURL: YOUR_BASE_urL,
          timeout: 7000,
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            'Authorization': "bearer " + token
          }
        });

Answer 3

let url = "";

let body= {}

let header= {
    headers: {'Authorization': "Bearer " + yourToken}
};

axios.post(url, body, header)
 .then(res => {
   console.log(res)
 }).catch(err => {
   console.log(err)
 });