Vue中使用axios请求拦截的方法介绍

//双向数据绑定获取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password

this.$axios.post("/api/request", this.$qs.stringify(httpRequest)).then(data => {
 //特殊错误处理，状态为10时为登录超时
 if(data.data.code === 10){
 this.$Message.error("登录已超时，请重新登录")
 this.$router.push("/login")
 //其余错误状态处理 
 }else if(data.data.code != 0){
 this.$Message.error(data.data.msg)
 //请求成功
 }else if(data.data.code === 0){
 //进行成功业务逻辑
 }
 //.......
});

//请求发送拦截，把数据发送给后台之前做些什么......
axios.interceptors.request.use((request) => {

 //这个例子中data是loginName和password
 let REQUEST_DATA = request.data
 //统一进行qs模块转换
 request.data = qs.stringify(REQUEST_DATA)
 //再发送给后台
 return request;

}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});

//请求返回拦截，把数据返回到页面之前做些什么...
axios.interceptors.response.use((response) => {
 //特殊错误处理，状态为10时为登录超时
 if (response.data.code === 10) {
 iView.Message.error("登录已超时，请重新登录");
 router.push("/login")
 //其余错误状态处理 
 } else if (response.data.code != 0) {
 iView.Message.error(response.data.msg)
 //请求成功
 } else if(response.data.code === 0){
 //将我们请求到的信息返回页面中请求的逻辑
 return response;
 }
 //......

}, function (error) {
 return Promise.reject(error);
});

//请求发送拦截
axios.interceptors.request.use((request) => {

 //获取请求的数据，这里是loginName和password
 let REQUEST_DATA = request.data
 //获取请求的地址，这里是/api/request
 let REQUEST_URL = request.url
 
 //设置签名并进行qs转换，且赋值给request的data，签名函数另外封装
 request.data = qs.stringify(requestDataFn(REQUEST_DATA, REQUEST_URL))
 //发送请求给后台
 return request;

}, function (error) {
 // Do something with request error
 return Promise.reject(error);
});

//已封装好的签名函数
function requestDataFn(data, method) {

 let postData = {}

 //时间戳，时间戳函数不作展示，也是已封装好的
 postData.timestamp = getNowFormatDate();

 //请求用户的session以及secretKey信息,为空是未登录，登录后我把它存在localStorage中，这个存在哪里都可以，这里只作为例子。
 postData.session = localStorage.getItem('session') || '';
 postData.secretKey = localStorage.getItem('secretKey') || '';
 
 //请求的地址，这里是/api/request
 postData.method = method;
 
 //请求的数据这里是loginName和password，进行base加密
 let baseData = Base.encode(JSON.stringify(data));
 
 //设置签名并进行md5加密
 let signature = md5.hex(postData.secretKey + baseData + postData.method + postData.session + postData.timestamp + postData.secretKey);
 
 //把数据再次进行加密
 postData.data = encodeURI(baseData);

 postData.signature = signature;
 
 return postData
}