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;

因此，当您确定拥有令牌时，可以从任何部分设置标题，然后您可以使用此代码设置标题。如果您已经提出了标题，您也可以使用此代码进行设置。

Answer 2

您可以使用vue-resource发出http请求，然后使用interceptors修改/修补请求。

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 3

<块引用>

在你的 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配置全局标头的最佳方法

3 个答案: