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

Question

我是 VueJs 的新手，我正在寻找为 Get、Post、VueJS 中的补丁配置全局 Headers 的最佳方法，易于使用且强大的安全性。目前我只是为每个组件将它写在 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

Answer 1

您可以使用 vue-resource for making http requests and then use interceptors 到 modify/patch 请求。

Vue.http.interceptors.push(function(request, next) {

  // modify method
  request.method = 'POST';

  // modify headers
  request.headers.set('X-CSRF-TOKEN', 'TOKEN');
  request.headers.set('Authorization', 'Bearer TOKEN');

  // continue to next interceptor
  next();
});

Answer 2

是的，使用 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';

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.

在创建后header更改

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

所以你可以从任何部分设置 header 当你确定你有 token 然后你可以使用这个代码来设置 header。如果您已经通过乞讨获得 header，您也可以使用此代码进行设置。

Answer 3

ON YOUR 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);
  }
);

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

Best way to config Global Headers for Get, Post, Patch in VueJS

vue.js

vuejs2

nuxt.js