vue中axios使用一：axios作攔截器

轉載請註明出處：　　

　　項目中用到了單點登陸，依賴的公司通用的jar包，且項目爲先後端分離的方式，爲了管理系統的全部請求和

超時管理，用到了axios，作前端請求攔截，並作管理。

　　其有如下特色：

　　

 　　axios是請求後臺資源的模塊，用來請求後臺資源。在項目中安裝的方法爲，在對應的項目路徑下，後dos窗口

執行如下命令：

npm install axios

 　　安裝成功後會在項目的package.json文件中出現對象安裝插件的版本：

 

在main.js中引用改模塊：

import axios from 'axios';

　　開始進行攔截請求：　　　

axios.interceptors.request.use((config) => {
  console.info(config);
  // 請求攔截
  jsonp('/authStatus', null, (err, data) => {
    console.info(data);
　　 // 請求攔截響應的參數，判斷是否會話過時
if(!data.hasLogin){
　　　　　// 頁面刷新跳轉到登陸頁面
        window.location.href = loginTimeOutUrl;
    }
  })
  return config;
});

　　攔截請求響應數據：

Vue.prototype.$http = axios;
axios.defaults.crossDomain = true;
axios.interceptors.response.use((response) => {
  if (response && response.data) {
    if (response.data.status == "UNKNOWN" || response.status == 302) {
      //alert("passport登陸超時，刷新從新登陸");
      window.location.reload();
    } else {
      return response;
    }
  } else {
    return response;
  }
}, function (error) {
  if (302 == error.response.status || error.response.status == "UNKNOWN") {
    //alert("passport登陸超時，刷新從新登陸");
    window.location.reload();
  } else {
    return Promise.reject(error);
  }
});
axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

 

本文參考：https://www.kancloud.cn/yunye/axios/234845