在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法

Question

我是 VueJs 的新手，我正在寻找在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法，该方法 易于使用且安全性强。目前我只是将它写在 export default {} 中用于每个组件，我知道这非常糟糕。所以请大家帮忙。

修复感谢@Hardik Satasiya

~/plugins/axios.js

每个组件：

 import axios from 'axios'

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  headers: {'Authorization': 'JWT ' + store.state.token}
})

export default api

问题：无法将存储传输到 axios.create，所以 store is not defined

原文由 KitKit 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

是的，使用 axios 是个好主意，因为它的回购协议得到维护。

你可以为此使用全局配置

import axios from 'axios';

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

或者 最好 的方法是为此创建单独的 instances （如果你同时使用 multiple api ）

 import axios from 'axios';

var myApi = axios.create({
  baseURL: 'https://my-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'CustomHeader1'}
});

// another api service
var amazonApi = axios.create({
  baseURL: 'https://amazon-domain.com/api/',
  timeout: 2000,
  headers: {'X-Custom-Header': 'CustomHeader2'}
});

export default {
    myApi,
    amazonApi
}

所以你可以单独使用 api 没有任何冲突。

如果您正在设置 auth 标头，最好不要在实例创建时设置它，而是可以在您的 ready callback 中设置它，这样您就可以从 localStorage 获取或从第三方获取，然后您可以设置它。

创建后更改标题

myApi.defaults.headers.authorization = 'JWT ' + yourToken;

所以当你确定你有令牌时，你可以从任何部分设置标题然后你可以使用这个代码来设置标题。如果您已经从乞讨中获得了标头，您也可以使用此代码来设置它。

原文由 Hardik Satasiya 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在你的 MAIN.JS 上

import axios from "axios";
const base = axios.create({
  baseURL: "http://127.0.0.1:8000/",
});

Vue.prototype.$http = base;

  Vue.prototype.$http.interceptors.request.use(
  config => {
      let accessToken = localStorage.getItem('token');
      if (accessToken) {
          config.headers = Object.assign({
              Authorization: `Bearer ${accessToken}`
          }, config.headers);
      }
      return config;
  },
  error => {
      return Promise.reject(error);
  }
);

原文由 Mohamed Raza 发布，翻译遵循 CC BY-SA 4.0 许可协议