vue设置header
使⽤vue-resource与vue-cookie实现页⾯登录,数据存储与后台的数据交互
后端交互对vue中contentType,和ajax的contentType区别对待
this.$http
.post(netUrl, change, {
headers: {
Authorization: "Bearer " + this.$("token")
}
})
.then(
respon => {
console.log(respon.data);
if (respon.data != null) {
}
},
respon => {社区工作者述职报告
console.log("error");
}
);
当服务器端需要设置contentType:“application/json”:
如果采⽤的是传统的$.ajax⽅式进⾏交互时设置contentType:"application/json;chart=UTF-8"也会导致服务器访问不成功必须严格设置为contentType:“application/json”;
当使⽤vue中的vue-resource⽅式交互时,即使不设置contentType:"application/json"也可成功交互;
为什么ajax要求那么严格,原因还不是很清楚;
但是我们可以通过以上⽅式:每个http请求中加⼊以下代码,进⾏设置请求头
headers: {水墨画简单
Authorization: "Bearer " + this.$("token")
}
全局设置请求头
虽然上述⽅式可以成功的设置请求头,但是每个请求都设置显得繁琐,⽽从⽹上查找解决⽅案始终没有成功解决修养是什么
解决问题的主要思路:
1.使得请求头中存在token
⽹上提供⽅式:
Vue.http.interceptors.push((request, next) => {
// ...
// 请求发送前的处理逻辑叙旧的意思是什么
request.beforeSend = function() {
request.headers['token'] = “token”;
}
next((respon) => {
// ...
// 请求发送后的处理逻辑
// ...
// 根据请求的状态,respon参数会返回给successCallback或errorCallback
return respon
})
测试后发现⽤以上拦截器的⽅式不可⾏,查到⽹上有说可以尝试
request.headers.t('token', "Bearer ")
⽅式,但是测试后发现仍⾏不通,通过各种尝试最后发现是去除request.beforeSend直接设置皆可以
Vue.http.interceptors.push((request, next) => {
// 请求发送前的处理逻辑
request.headers.t('token', "Bearer ")
next((respon) => {
// 请求发送后的处理逻辑
课本剧格式// 根据请求的状态,respon参数会返回给successCallback或errorCallback
return respon
})
二次元萝莉头像})
如何获取真实的token,
因为全局设置是在main.js中,⽽token是在登录后才存储下来的能否获取到真实值
1.确保你的token确实存在
2.正常程序中通过this.$(“token”)可以获取token的值,因为对vue的认知不够深,不知道在⼊⼝⽂件处如何获取token值,通过多次测试获取解决⽅案
三滴水import Vue from 'vue'
import VueCookies from 'vue-cookies'
Vue.u(VueCookies);
Vue.http.interceptors.push((request, next) => {
// 请求发送前的处理逻辑胡萝卜的简笔画
request.headers.t('Authorization', "Bearer " + ("token")) next((respon) => {
// 请求发送后的处理逻辑
// 根据请求的状态,respon参数会返回给successCallback或errorCallback return respon
})
})