vue.js - 在 VueJS 中为 Get、Post、Patch 配置全局 header 的最佳方法

Question

我是 VueJs 的新手，我正在寻找为 VueJS 中的 Get、Post、Patch 配置全局 header 的最佳方法，该方法易于使用且安全性强。目前我只是为每个组件在 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 未定义

Answer 1

是的，使用 axios 是个好主意，因为它的 repo 得到了维护。

你可以为此使用全局配置

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

OR best way is to create separate instances for this (if you are using multiple api at same time)

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，不会有任何冲突。

if you are setting auth header it's nice to not set it at instance creation instead you can set it in your ready callback so you can either fetch from localStorage or obtain from the third party and you can set it.

创建后更改标题

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

因此，当您确定拥有 token 时，您可以从任何部分设置 header ，然后您可以使用此代码设置 header 。如果您已经从乞讨中获得了 header ，您也可以使用此代码来设置它。