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

Question

我是VueJs的新手,我找到了在VueJS中为Get,Post,Patch配置全局标头的最佳方法,它易于使用且安全性强.在目前我只是export default {}为每个组件写它,我知道这是非常糟糕的.所以我请你们帮忙.

感谢@Hardik Satasiya

〜/插件/ 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

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;

因此,当您确定拥有令牌时,可以从任何部分设置标题,然后您可以使用此代码设置标题.如果您已经有来自请求的标题,您也可以使用此代码进行设置.