vue+element踩坑记-统一管理请求头文件
vue+element踩坑记-统一管理请求头文件
何处锦绣不灰堆
发布于 2020-05-29 14:45:47
发布于 2020-05-29 14:45:47
我们在请求接口的时候，会出现很多的请求的例子，有的时候接口是需要加请求头的，应该说绝大多数的情况都是需要加请求头的，我在做项目的时候，我们有一个就是需要在每一个接口的请求之前加上请求头，作为一个令牌，也就是我们常用的auto验证，那么我刚开始的时候是在每一个接口的里面加上了这个请求头的，这也是我们一个很常规的做法，但是我写着写着觉得自己是一个傻逼，这样写也太没效率了，我一个对代码有追求的人，怎么可能写出来那么没有质量的代码呢？于是就开始找vue里面是怎么统一管理这个的方法，于是乎，功夫不负有心人，在别人的帮助下，我还是成功的找到了，这里做一个简单的记录，以备以后可能用的到。
我们一般的写法是这样的：（这是我写的一个测试登录的接口）
/**
* 调用login的接口
* @aim test
* 必传参数：{code,username,password}
* 测试阶段登录为：super_root
* 登录方法：handleLogin
* @type {default.methods}
* @param code name password 门店的code 用户名 密码
*/
handleLogin: function () {
let that = this;
let url = '自己的请求地址';
let username = this.account.username;
let pwd = this.account.pwd;
let code = this.account.code;
this.$axios({
method: 'post',
url: url,
data: {
code : code,
user_name: username,
password: that.getmd5(pwd),
},
headers:{'auto':sessionStorage.getItem('auto')}
}).then(function (res) {
console.info(res);
if (res.data.message === "success") {
sessionStorage.setItem("authorization" , res.data.new_authorization);
localStorage.setItem('access-user', JSON.stringify(res.data.real_name));
that.$router.push({path: '/'});
} else {
that.$message({
message: '登录失败',
type: 'warning'
});
}
}).catch(function (err) {
that.$message({
message: '登录失败',
type: 'warning'
});
})
},不BB，看代码：
统一以后是这样的：
/**
* @ 添加公共的请求头文件 做授权使用
*/
axios({
method : 'get',
url: `自己的授权的url地址'
}).then(res=>{
axios.defaults.headers.common['authorization'] = res.data.authorization;
new Vue({
router,
store,
el: '#app',
render: h => h(App)
})
});这个文件是在main.js里面写的，这里有一点是需要注意的，就是在这里new Vue不可以省略，省略的话就不行了，具体的原因好像是和异步什么的有关系，我也不是很明白，等我将异步的搞明白我会更新这里的，解释清楚的
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2019-03-20 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读