Vue вызов API-ключа в заголовке - PullRequest
Новая
       83

Vue вызов API-ключа в заголовке

0 голосов
/ 05 мая 2020

My API KEY = 2356yhtujkiw

Я использую AX IOS на VUEJS как для получения / отправки запроса.

В документе API говорится, чтобы добавить это Ключ API как на header всех запросов.

Я попытался установить его как axios.defaults.headers.common['header'] = '2356yhtujkiw';, но это не сработало.

Как правильно определить API KEY в заголовке?

1 Ответ

0 голосов
/ 05 мая 2020

это может сбивать с толку, когда вы начинаете, и некоторые термины, например header, могут означать разные вещи в зависимости от контекста.

Есть несколько способов выполнить вызовы ax ios в vue.

  • Есть «простой», где вы добавляете материал прямо в компонент
  • вы можете интегрировать его в vuex
  • создать собственный помощник / функция-оболочка (для использования в компоненте или vuex)
  • использовать плагин vue ax ios

Вдобавок к этому есть несколько способов реализовать ax ios

  • повторно использовать глобальный экземпляр
  • создавать новый экземпляр для каждого вызова

не видя вашего кода, трудно понять, каким образом вы его используете , но я попытаюсь дать шаги, чтобы упростить репликацию

, создать api.js в вашей папке sr c с помощью: 

import axios from 'axios'
let TOKEN = null;

export default {
  setHeader(val){
    TOKEN = val;
  },
  fetchUsers: () => {
    const instance = axios.create({
      baseURL: 'https://api.example.com',
      headers: {
        header: TOKEN
      }
    });
    // or: instance.defaults.headers.common['header'] = TOKEN;

    return instance.get('/users')
      .then((result) => {
        this.users = result.data
      })
  }
}

В компоненте или Vuex вы можете ... 

import api from '../api.js'

// set header
api.setHeader('abc123')

// make api call
api.fetchUsers().then(r=> {console.log(r)});

Этот (хотя и непроверенный код) должен работать ... Я Это не самый чистый способ его использования, но его легко реализовать в существующем коде.

TL; DR;

Причина, по которой axios.defaults.headers.common['header'] = '2356yhtujkiw'; не работает, - вероятно , потому что вы уже создали экземпляр и используете его повторно. Обновление значения по умолчанию будет применяться только для последующих созданных экземпляров. Приведенный выше пример позволяет обойти это, не используя никаких значений по умолчанию, а просто вставляя заголовки в каждый новый экземпляр, который создается для каждого нового вызова.

...