axios口味芝士_ZenDei技術網路在線

一、一體化運營平臺前端請求部分 1.介面封裝一體化運營平臺採用的是封裝axios的方式來簡化請求介面的使用，在添加新介面時只要調用封裝好的方法就可以發出請求並直接得到解析後的數據 2.整個過程解析 (1)請求方法調用request方法並傳需要的參數 sync_collect_diff_data(d ...

一、一體化運營平臺前端請求部分
1.介面封裝
一體化運營平臺採用的是封裝axios的方式來簡化請求介面的使用，在添加新介面時只要調用封裝好的方法就可以發出請求並直接得到解析後的數據
2.整個過程解析
(1)請求方法調用request方法並傳需要的參數

     sync_collect_diff_data(data) {
    return request({
      url: '/resource-server/collection/sync_collect_diff_data', //請求路徑
      method: 'post',//請求方式，這裡是後面自己設置的，不是常規意義上的get/post
      Data //請求參數
    })
  }

(2)request方法進入到until目錄下的request.js方法類

// create an axios instance
const service = axios.create({
  baseURL: process.env.BASE_API, // api 的 base_url
  timeout: 60000 // request timeout
})

創建一個axios實例，其中baseURL是配置在其它文件中，主要用來區分開發環境和測試環境等
(3)給axios實例設置請求頭

axios.interceptors.request.use(config => {
  if (sessionStorage.getItem('accessToken')) {
    config.headers.accessToken = sessionStorage.getItem('accessToken')
  }
  if (sessionStorage.getItem('clientId')) {
    config.headers.clientId = sessionStorage.getItem('clientId')
  }
  if (sessionStorage.getItem('csrfToken')) {
    config.headers.csrfToken = sessionStorage.getItem('csrfToken')
  }
  if (sessionStorage.getItem('loginName')) {
    config.headers.loginName = sessionStorage.getItem('loginName')
  }
  return config
});

請求發起時會附帶上在這裡面設置的參數，表現形式為以下

(4)設置接收方法

  axios.interceptors.response.use((response) => {
  if (response.data.errCode === 990014) {
    router.push('/')
  }
 ...
}

接收方法中可以設置對接受到的response數據進行加工解析，以及錯誤處理，在這個過程中可以和後端約定幾種通用的處理方式，例如在檢測到登錄信息缺失等時自動彈出到登錄界面
(5）拋出特定類型的接收數據解析方法

  get(url, params = {}) {
    return new Promise((resolve, reject) => {
      axios.get(process.env.API_ROOT + url, { params }).then(res => {
        if (res) {
          if (res.data.errCode === 0) {
            resolve(res.data.data);
          } else {
            reject(res.data.errMsg);
          }
        }
      }).catch(error => {
        reject(error);
      })
    })
  },

此類型方法需要通過export來拋出，同時方法名就是之前調用request方法時候的類型，
在此方法中resolve代表成功的情況，此時方法會將數據返回給調用方，reject方法則代表失敗的情況下返回的數據，需要註意的一點是方法返回無論成功還是失敗，是先經過上面設定的攔截器，所以如果上面攔截器處理之後，就不會到這邊方法的處理流程中
二、Axios知識學習
一、axios的封裝
在vue項目中，和後臺交互獲取數據這塊，我們通常使用的是axios庫，它是基於promise的http庫，可運行在瀏覽器端和node.js中。他有很多優秀的特性，例如攔截請求和響應、取消請求、轉換json、客戶端防禦XSRF等。
1.安裝導入

npm install axios; // 安裝axios
一般會在項目的src目錄中，新建一個request文件夾，然後在裡面新建一個http.js和一個api.js文件。http.js文件用來封裝我們的axios，api.js用來統一管理我們的介面。

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數據，後面會提到

2.環境的切換
通過node的環境變數來匹配我們的預設的介面url首碼。axios.defaults.baseURL可以設置axios的預設請求地址

// 環境的切換
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = 'https://www.baidu.com';} 
else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = 'https://www.ceshi.com';
} 
else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'https://www.production.com';
}

在一體化中是通過分文件拋出的方式

3.設置請求超時
通過axios.defaults.timeout設置預設的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。
axios.defaults.timeout = 10000;
4.post請求頭的設置
post請求的時候，我們需要加上一個請求頭，所以可以在這裡進行一個預設的設置，即設置post的請求頭為
application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
5.請求攔截
我們在發送請求前可以進行一個請求的攔截，為什麼要攔截呢，我們攔截請求是用來做什麼的呢？比如，有些請求是需要用戶登錄之後才能訪問的，或者post請求的時候，我們需要序列化我們提交的數據。這時候，我們可以在請求被髮送之前進行一個攔截，從而進行我們想要的操作。一體化中使用這塊設定了許可權校驗，也就是crftoken等

// 先導入vuex,因為我們要使用到裡面的狀態對象
// vuex的路徑根據自己的路徑去寫
import store from '@/store/index';
// 請求攔截器axios.interceptors.request.use(    
    config => {        
        // 每次發送請求之前判斷vuex中是否存在token        
        // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登錄情況
        // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },  error => {        
        return Promise.error(error);    
})

這裡說一下token，一般是在登錄完成之後，將用戶的token通過localStorage或者cookie存在本地，然後用戶每次在進入頁面的時候（即在main.js中），會首先從本地存儲中讀取token，如果token存在說明用戶已經登陸過，則更新vuex中的token狀態。然後，在每次請求介面的時候，都會在請求的header中攜帶token，後臺人員就可以根據你攜帶的token來判斷你的登錄是否過期，如果沒有攜帶，則說明沒有登錄過。

響應攔截器很好理解，就是伺服器返回給我們的數據，我們在拿到之前可以對他進行一些處理。例如上面的思想：如果後臺返回的狀態碼是200，則正常返回數據，否則的根據錯誤的狀態碼類型進行一些我們需要的錯誤，其實這裡主要就是進行了錯誤的統一處理和沒登錄或登錄過期後調整登錄頁的一個操作。

6.封裝get方法和post方法
我們常用的ajax請求方法有get、post、put等方法，相信小伙伴都不會陌生。axios對應的也有很多類似的方法，不清楚的可以看下文檔。但是為了簡化我們的代碼，我們還是要對其進行一個簡單的封裝。下麵我們主要封裝兩個方法：get和post。
get方法：我們通過定義一個get函數，get函數有兩個參數，第一個參數表示我們要請求的url地址，第二個參數是我們要攜帶的請求參數。get函數返回一個promise對象，當axios其請求成功時resolve伺服器返回值，請求失敗時reject錯誤值。最後通過export拋出get函數。
post方法：原理同get基本一樣，但是要註意的是，post方法必須要使用對提交從參數對象進行序列化的操作，所以這裡我們通過node的qs模塊來序列化我們的參數。這個很重要，如果沒有序列化操作，後臺是拿不到你提交的數據的。

這裡有個小細節說下，axios.get()方法和axios.post()在提交數據時參數的書寫方式還是有區別的。區別就是，get的第二個參數是一個{}，然後這個對象的params屬性值是一個參數對象的。而post的第二個參數就是一個參數對象。兩者略微的區別要留意

7.封裝配置的優點
1.通過直接引入我們封裝好的axios實例，然後定義介面、調用axios實例並返回，可以更靈活的使用axios，比如你可以對post請求時提交的數據進行一個qs序列化的處理等。
2.請求的配置更靈活，你可以針對某個需求進行一個不同的配置。關於配置的優先順序，axios文檔說的很清楚，這個順序是：在 lib/defaults.js 找到的庫的預設值，然後是實例的 defaults 屬性，最後是請求的 config 參數。後者將優先於前者。
3.restful風格的介面，也可以通過這種方式靈活的設置api介面地址。

三、一體化後端請求部分
1.後端流程
登錄過程中後端會生成accessToken和clientId用來進行許可權校驗工作，也就是之前寫到的在請求頭中設定這兩項的目的，如果是被標記為需要許可權校驗的介面，則會校驗第三項，也就是csrfToken。根據校驗結果來決定是否調用實際方法，如果是不需要校驗的介面則會直接進入實際方法
2.後端請求封裝
後端響應請求時也進行了部分封裝，主要體現在路由，許可權校驗
(1)路由：一體化在系統相關後端上是採用的分模塊部署的，具有一個統一的路由，通過這個統一路由來提供一個統一對外介面，這就導致在請求時存在一個註意事項，與常規spring+mybatis路由不同，還需要加上一層模塊名字路由
/resource-server/collection/delete_collect_cfg_data
/模塊名/類層級路由/方法級路由
(2)許可權校驗:許可權校驗這塊採用的時AOP切麵，環繞通知的方式來封裝實現的，通過在介面上增加一個 @AuthPlugin來開啟許可權校驗，許可權校驗流程簡單來說分問兩個層級，第一級校驗是否是有效用戶，這塊採用的是ceftoken比對來確認，第二層則是確認是否有許可權訪問當前介面，這塊則是讀表的方式來確認

 // 只攔截使用了 @AuthPlugin 註解的方法
  AuthPlugin authPlugin = method.getAnnotation(AuthPlugin.class);
 if (authPlugin == null) {
    return joinPoint.proceed();
 }