在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法 [英] Best way to config Global Headers for Get, Post, Patch in VueJS

问题描述

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

修复感谢@Hardik Satasiya

~/plugins/axios.js

每个组件:

从 'axios' 导入 axiosvar api = axios.create({baseURL: 'http://localhost:8000/api/v1/',标头:{'授权':'JWT' + store.state.token}})导出默认api

问题:无法将 store 传输到 axios.create，因此 store 未定义

解决方案

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

您可以为此使用全局配置

从'axios'导入axios；axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['授权'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

<块引用>

OR 最好的方法是为此创建单独的instances(如果您同时使用multiple api)

从'axios'导入axios；var myApi = axios.create({baseURL: 'https://my-domain.com/api/',超时:1000，标头:{'X-Custom-Header':'CustomHeader1'}});//另一个 api 服务var amazonApi = axios.create({baseURL: 'https://amazon-domain.com/api/',超时:2000，标头:{'X-Custom-Header':'CustomHeader2'}});导出默认{我的Api，亚马逊Api}

所以你可以单独使用 api 而不会产生任何冲突.

<块引用>

如果您要设置 auth 标头，最好不要在创建实例时设置它，而是可以在 ready callback 中设置它，这样您就可以从 localStorage 获取或获取来自第三方，您可以设置它.

创建后更改标题

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

因此，当您确定拥有令牌时，您可以从任何部分设置标题，然后您可以使用此代码设置标题.如果你已经有了乞讨的标题，你也可以使用这个代码来设置它.

I'm new with VueJs, I'm finding best way to config Global Headers for Get, Post, Patch in VueJS, which is easy to use and strong security. In the current I just write it in export default {} for every components and it's very bad I know. So I ask you guys to help.

Fixed Thanks to @Hardik Satasiya

~/plugins/axios.js

Every Components:

import axios from 'axios'

var api = axios.create({
  baseURL: 'http://localhost:8000/api/v1/',
  headers: {'Authorization': 'JWT ' + store.state.token}
})

export default api

Issues: Can't tranmit store in to axios.create, so store is not defined

解决方案

Yes its good idea to use axios because its repo is maintained.

you can use global config for this

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
}

so you can use api separately without any conflict.

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.

to change header afterward after creation

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

so you can set header from any part when you are sure you have token then you can use this code to set header. And if you have header already from begging you can also use this code to set it.

这篇关于在 VueJS 中为 Get、Post、Patch 配置全局标头的最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！