在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);
});
//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data，如果請求的數據狀態code不為0,會被攔截，則data為undefined
 if(data){
 //進行請求返回成功邏輯
 }
});

//雙向數據綁定獲取值
let httpRequest = {};
httpRequest.loginName = this.loginName
httpRequest.password= this.password
this.$axios.post("/api/request", httpRequest).then(data => {
 //這是要先判斷data，如果請求的數據狀態code不為0,會被攔截，則data為undefined
 if(data){
 //進行請求返回成功邏輯
 }
});

//請求發送攔截
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，進行base64加密
 let base64Data = Base64.encode(JSON.stringify(data));
 //設置簽名并進行md5加密
 let signature = md5.hex(postData.secretKey + base64Data + postData.method + postData.session + postData.timestamp + postData.secretKey);
 //把數據再次進行加密
 postData.data = encodeURI(base64Data);
 postData.signature = signature;
 return postData
}