Question

我有一个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，我找不到如何为特定请求设置不同的标头。 / p>

Answer 1

我的最终解决方案是基于在中央存储区中创建一些操作，因此通过该操作使axios requests成为可能。

central.js（与axios相关的操作所在的位置）

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

带有nuxt-axios的多个API提供程序和一个用于默认标头的插件

1 个答案: