全局修改 axios 默认标头时出现问题 - Vue答案

【问题标题】：Problem when modifying axios default headers globally - Vue全局修改 axios 默认标头时出现问题 - Vue
【发布时间】：2019-05-24 15:04:14
【问题描述】：

在 main.js

中

import axios from 'axios';

axios.defaults.headers.common = {
    'Authorization': 'JWT ' + Vue.auth.getToken()
};

axios.defaults.baseURL = process.env.VUE_APP_BASE_URL; //TODO: append the trailing slash

// Add modified axios instance to Vue prototype so that to be available globally via Vue instance
Vue.prototype.$http = axios;

到目前为止一切正常。（我能够成功登录并存储令牌）

现在，我有另一个组件，它通过在组件的 created() lifehook 上执行的 ajax 调用从服务器获取用户列表。我的问题是，当我尝试访问组件中的 this.$http 时，我从服务器返回 401 错误响应，因为 Authorization 标头对请求标头不可用（尽管我已经预先配置了 axios.defaults.headers。常见）

奇怪的是，如果我点击浏览器上的刷新按钮，那么令牌会正确附加到请求标头，并且成功获取用户列表**。**

谁能解释一下为什么会这样？

【问题讨论】：

能贴出使用Axios的组件代码吗？

标签： javascript vue.js vuejs2 axios

【解决方案1】：

您可以使用 axios 请求拦截器来全局添加您的标头

axios.interceptors.request.use(function (config) {
// Do something before request is sent
  return config;
}, function (error) {
// Do something with request error
   return Promise.reject(error);
});

您可以使用 config.header 访问您当前的请求阅读器，并且可以将标头设置为请求，例如

config.headers = {
   'Authorization': 'JWT ' + Vue.auth.getToken()
}

https://github.com/axios/axios

【讨论】：

【解决方案2】：

您可以创建一个类来全局添加您选择的标题。

import axios from 'axios';

/**
 * A wrapper around an axios instance, preconfigured to have a base URL and auth headers
 */
class Axios {
    constructor(baseUrl, bearerToken) {

        return axios.create({
            baseURL: baseUrl,
            headers: {
                Authorization: `Bearer ${bearerToken}`
            }
        });
    }
}

export default Axios;

然后在你的 app.js 中

import { Axios } from 'my/class'


const myService = new Axios('baseURL', 'bearerToken');

【讨论】：

能不能做一个export default new Axios('baseurl', 'token') 这样就可以直接使用而不用每次都声明了？

【解决方案3】：

您是否尝试过使用asios.create？

http/index.js:

import axios from 'axios'
import env from '../config/env'
import store from '../store'

export default (() =>
  axios.create({
    baseURL: env.API_HOST,
    headers: {
      common: {
        Authorization: store.getters['user/getAuthToken']
      }
    }
  }))()

main.js:

import http from './http'

Vue.prototype.$http = http

另外我使用了一个 store 动作来更新 axios 客户端：

updateHTTPClientAuthToken () {
  Vue.prototype.$http.defaults.headers.common.Authorization = this.getters.getAuthToken
}

【讨论】：