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

Posted 2023-02-22

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

【英文标题】：Best way to config Global Headers for Get, Post, Patch in VueJS

【发布时间】：2018-06-08 16:00:54

【问题描述】：

我是 VueJs 新手，我正在寻找，它易于使用且安全性强。目前我只是为每个组件写在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

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

【参考方案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';

或最佳方法是为此创建单独的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。给你最好的答案！

很高兴，你喜欢它:)

打扰一下，您能告诉我如何在代码中获取 Store 中的令牌 或 LocalStorage 中的令牌吗？

你能详细描述一下吗，意思是你需要在创建实例之后添加token？

ok 添加了更新，当您获得该实例的令牌时，您可以再次设置标题。

【参考方案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);
  
);

【参考方案3】：

您可以使用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();
);

【讨论】：

现在我使用 Axios @Manish

Axios 也支持拦截器：github.com/axios/axios#interceptors。还要调查一下：***.com/questions/44207197/…