ios 请求头设置token_axios中为所有请求带上Token头

开发环境:vue-cli

主要插件:axios

应用场景:每次请求接口时,需要在headers添加对应的Token验证

探索过程如下:

在main.js中引入axios,主动请求一次签发Token的接口并设置到axios的默认headers中,以此达到后续的axios请求都带上Token头,如下:

import axios from 'axios'

axios.post('signToken', {

"NickName": "xxxx",

"Password": "xxxx",

"RequestSign": "B858C5EEE7FD4D37C635FB55841ACA59"

}).then(res => {

axios.defaults.headers.common['Authorization'] = res.headers.authorization

})

//实例化Vue

new Vue({

el: '#app',

router,

components: {

App

},

template: ''

})

组件内部有如此方法:

methods: {

getBanner() {

axios.post('getBanner', {

HospitalId: 1

}).then(res => {

console.log(res)

})

}

}

运行之后结果如下:

发现headers中并没有带上预期的Token,后来仔细回想,终于得到结论:axios.then属于promise,是异步线程(详情参考廖雪峰老师是的介绍),通俗点讲就是在执行new Vue()之前,并未执行

axios.defaults.headers.common['Authorization'] = res.headers.authorization

茅塞顿开,于是改版,把new Vue()加入到.then函数中:

axios.post('signToken', {

"NickName": "xxxx",

"Password": "xxxx",

"RequestSign": "B858C5EEE7FD4D37C635FB55841ACA59"

}).then(res => {

axios.defaults.headers.common['Authorization'] = res.headers.authorization

//实例化Vue

new Vue({

el: '#app',

router,

components: {

App

},

template: ''

})

})

Let's go on:

ok 已经操作成功 取到了我们的banner图啦~至此探索就结束了,但是依然有个小问题哦,如果你给你的谷歌内核装了Vue-Devtools,会发现捕捉不到vue实例了:

我当时也是心里一慌,不过后来求助于vue官方论坛的老司机,他不疾不徐地告诉我,你试试Refresh(手动白眼)

至此才算真的圆满结束了,在所有组件内的axios都能带上我们默认设置的Token头了。

你可能感兴趣的:(ios,请求头设置token)