axios口味芝士-有解無憂

一、一體化運營平臺前端請求部分
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();
 }

@AuthPlugin(serviceCode = "model-cancel", logLevel = LogRecordLevel.NO_NEED)
引數意義:服務名，這個需要和給用戶配置的服務權限一致；日志級別，權限校驗同時集成了日志輸出功能，所以需要區分日志級別

本文來自博客園，作者：李李李的博客，轉載請注明原文鏈接：https://www.cnblogs.com/constLi/p/15963626.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/467062.html

標籤：其他

上一篇：說一說CSS中的變數

下一篇：JavaScript知識總結原型篇