Несколько провайдеров API с nuxt-axios и плагином для заголовков по умолчанию - PullRequest
Новая
       32

Несколько провайдеров API с nuxt-axios и плагином для заголовков по умолчанию

3 голосов
/ 31 мая 2019

У меня есть приложение Nuxt с большим количеством запросов к одному и тому же API, но мне также нужно отправить запрос различным провайдерам, кроме моего основного API, и я не знаю, как управлять заголовками по умолчанию.

Это моя рабочая настройка: создайте плагин для добавления заголовков ко всем запросам, например:

plugins/axios.js

export default function({ $axios, store, redirect }) {
   $axios.onRequest(config => {
       config.headers.common.Authorization = 'token 123';
       config.headers.common["Custom-header"] = 'blablabla';
 }
}

nuxt.config.js

module.exports = {
    plugins: ["@/plugins/axios"],
    axios: {
        baseURL: process.env.API_URL,
    }
}

store.js

async changeKeyVersionOnline({ commit }) {
    const response = await this.$axios.get(
      `users/1`
    );
    return response;
  },

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

Как я могу это сделать, я прочитал о параметре прокси пакета nuxt-axios, но я понимаю, что это только меняет базовый URL запроса, я не могу найти, как установить разные заголовки для конкретного запроса.

1 Ответ

0 голосов
/ 26 июля 2019

Мое окончательное решение было основано на создании некоторых действий в центральном хранилище, поэтому axios requests выполняются с помощью этих действий.

central.js (где живут действия, связанные с аксиосами) 

import qs from "qs";

export const state = () => ({
  accessToken: "",
  clientId: 0
});

export const getters = {
  getHeadersWithAuth: state => {
    const config = {
      headers: {
        Authorization: "Bearer " + state.accessToken
      }
    };
    return config;
  },
  getHeadersWithAuthClient: state => {
    const config = {
      headers: {
        Authorization: "Bearer " + state.accessToken,
        Client: state.clientId
      }
    };
    return config;
  }
};

export const mutations = {};

export const actions = {
  async getWithAuth({ getters }, { path, params }) {
    const config = getters.getHeadersWithAuth;
    config.params = params;
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { encode: false });
    };
    const result = await this.$axios.get(path, config);
    return result;
  },
  async getWithAuthClient({ getters }, { path, params }) {
    const config = getters.getHeadersWithAuthClient;
    config.params = params;
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { encode: false });
    };
    const result = await this.$axios.get(path, config);
    return result;
  },
  async putWithAuthClient({ getters }, { path, body, params }) {
    const config = getters.getHeadersWithAuthClient;
    config.params = params;
    config.paramsSerializer = function(params) {
      return qs.stringify(params, { encode: false });
    };
    const result = await this.$axios.put(path, body, config);
    return result;
  }
};

test.js Другой магазин, использующий пользовательские запросы axios 

async updateProductDetailsAction({ commit, dispatch, state }, productData) {

  const request = {
    path: `endpoints/` + productData.id + `/details`,
    body: {
      length: 123,
      name: 'The product name'
    },
    params: {}
  };
  const result = await dispatch("auth/putWithAuthClient", request, {
    root: true
  });

  await commit("setProductDetails", productData.id);

  return result;
}
...