一、一體化運(yùn)營平臺前端請求部分
1.接口封裝
一體化運(yùn)營平臺采用的是封裝axios的方式來簡化請求接口的使用，在添加新接口時(shí)只要調(diào)用封裝好的方法就可以發(fā)出請求并直接得到解析后的數(shù)據(jù)
2.整個(gè)過程解析
(1)請求方法調(diào)用request方法并傳需要的參數(shù)

創(chuàng)新互聯(lián)公司主要業(yè)務(wù)有網(wǎng)站營銷策劃、成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、微信公眾號開發(fā)、重慶小程序開發(fā)、HTML5建站、程序開發(fā)等業(yè)務(wù)。一次合作終身朋友，是我們奉行的宗旨；我們不僅僅把客戶當(dāng)客戶，還把客戶視為我們的合作伙伴，在開展業(yè)務(wù)的過程中，公司還積累了豐富的行業(yè)經(jīng)驗(yàn)、成都全網(wǎng)營銷推廣資源和合作伙伴關(guān)系資源，并逐漸建立起規(guī)范的客戶服務(wù)和保障體系。 

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

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

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

創(chuàng)建一個(gè)axios實(shí)例，其中baseURL是配置在其它文件中，主要用來區(qū)分開發(fā)環(huán)境和測試環(huán)境等
(3)給axios實(shí)例設(shè)置請求頭

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
});

請求發(fā)起時(shí)會附帶上在這里面設(shè)置的參數(shù)，表現(xiàn)形式為以下

(4)設(shè)置接收方法

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

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

 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來拋出，同時(shí)方法名就是之前調(diào)用request方法時(shí)候的類型，
在此方法中resolve代表成功的情況，此時(shí)方法會將數(shù)據(jù)返回給調(diào)用方，reject方法則代表失敗的情況下返回的數(shù)據(jù)，需要注意的一點(diǎn)是方法返回?zé)o論成功還是失敗，是先經(jīng)過上面設(shè)定的攔截器，所以如果上面攔截器處理之后，就不會到這邊方法的處理流程中
二、Axios知識學(xué)習(xí)
一、axios的封裝
在vue項(xiàng)目中，和后臺交互獲取數(shù)據(jù)這塊，我們通常使用的是axios庫，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中。他有很多優(yōu)秀的特性，例如攔截請求和響應(yīng)、取消請求、轉(zhuǎn)換json、客戶端防御XSRF等。
1.安裝導(dǎo)入

npm install axios; // 安裝axios
一般會在項(xiàng)目的src目錄中，新建一個(gè)request文件夾，然后在里面新建一個(gè)http.js和一個(gè)api.js文件。http.js文件用來封裝我們的axios，api.js用來統(tǒng)一管理我們的接口。

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

2.環(huán)境的切換
通過node的環(huán)境變量來匹配我們的默認(rèn)的接口url前綴。axios.defaults.baseURL可以設(shè)置axios的默認(rèn)請求地址

// 環(huán)境的切換
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.設(shè)置請求超時(shí)
通過axios.defaults.timeout設(shè)置默認(rèn)的請求超時(shí)時(shí)間。例如超過了10s，就會告知用戶當(dāng)前請求超時(shí)，請刷新等。
axios.defaults.timeout = ;
4.post請求頭的設(shè)置
post請求的時(shí)候，我們需要加上一個(gè)請求頭，所以可以在這里進(jìn)行一個(gè)默認(rèn)的設(shè)置，即設(shè)置post的請求頭為
application/x-www-form-urlencoded;charset=UTF-8
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
5.請求攔截
我們在發(fā)送請求前可以進(jìn)行一個(gè)請求的攔截，為什么要攔截呢，我們攔截請求是用來做什么的呢？比如，有些請求是需要用戶登錄之后才能訪問的，或者post請求的時(shí)候，我們需要序列化我們提交的數(shù)據(jù)。這時(shí)候，我們可以在請求被發(fā)送之前進(jìn)行一個(gè)攔截，從而進(jìn)行我們想要的操作。一體化中使用這塊設(shè)定了權(quán)限校驗(yàn)，也就是crftoken等

// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對象
// vuex的路徑根據(jù)自己的路徑去寫
import store from '@/store/index';
// 請求攔截器axios.interceptors.request.use(    
    config => {        
        // 每次發(fā)送請求之前判斷vuex中是否存在token        
        // 如果存在，則統(tǒng)一在http請求的header都加上token，這樣后臺根據(jù)token判斷你的登錄情況
        // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對返回狀態(tài)進(jìn)行判斷 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },  error => {        
        return Promise.error(error);    
})

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

響應(yīng)攔截器很好理解，就是服務(wù)器返回給我們的數(shù)據(jù)，我們在拿到之前可以對他進(jìn)行一些處理。例如上面的思想：如果后臺返回的狀態(tài)碼是200，則正常返回?cái)?shù)據(jù)，否則的根據(jù)錯(cuò)誤的狀態(tài)碼類型進(jìn)行一些我們需要的錯(cuò)誤，其實(shí)這里主要就是進(jìn)行了錯(cuò)誤的統(tǒng)一處理和沒登錄或登錄過期后調(diào)整登錄頁的一個(gè)操作。

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

這里有個(gè)小細(xì)節(jié)說下，axios.get()方法和axios.post()在提交數(shù)據(jù)時(shí)參數(shù)的書寫方式還是有區(qū)別的。區(qū)別就是，get的第二個(gè)參數(shù)是一個(gè){}，然后這個(gè)對象的params屬性值是一個(gè)參數(shù)對象的。而post的第二個(gè)參數(shù)就是一個(gè)參數(shù)對象。兩者略微的區(qū)別要留意

7.封裝配置的優(yōu)點(diǎn)
1.通過直接引入我們封裝好的axios實(shí)例，然后定義接口、調(diào)用axios實(shí)例并返回，可以更靈活的使用axios，比如你可以對post請求時(shí)提交的數(shù)據(jù)進(jìn)行一個(gè)qs序列化的處理等。
2.請求的配置更靈活，你可以針對某個(gè)需求進(jìn)行一個(gè)不同的配置。關(guān)于配置的優(yōu)先級，axios文檔說的很清楚，這個(gè)順序是：在 lib/defaults.js 找到的庫的默認(rèn)值，然后是實(shí)例的 defaults 屬性，最后是請求的 config 參數(shù)。后者將優(yōu)先于前者。
3.restful風(fēng)格的接口，也可以通過這種方式靈活的設(shè)置api接口地址。

三、一體化后端請求部分
1.后端流程
登錄過程中后端會生成accessToken和clientId用來進(jìn)行權(quán)限校驗(yàn)工作，也就是之前寫到的在請求頭中設(shè)定這兩項(xiàng)的目的，如果是被標(biāo)記為需要權(quán)限校驗(yàn)的接口，則會校驗(yàn)第三項(xiàng)，也就是csrfToken。根據(jù)校驗(yàn)結(jié)果來決定是否調(diào)用實(shí)際方法，如果是不需要校驗(yàn)的接口則會直接進(jìn)入實(shí)際方法
2.后端請求封裝
后端響應(yīng)請求時(shí)也進(jìn)行了部分封裝，主要體現(xiàn)在路由，權(quán)限校驗(yàn)
(1)路由：一體化在系統(tǒng)相關(guān)后端上是采用的分模塊部署的，具有一個(gè)統(tǒng)一的路由，通過這個(gè)統(tǒng)一路由來提供一個(gè)統(tǒng)一對外接口，這就導(dǎo)致在請求時(shí)存在一個(gè)注意事項(xiàng)，與常規(guī)spring+mybatis路由不同，還需要加上一層模塊名字路由
/resource-server/collection/delete_collect_cfg_data
/模塊名/類層級路由/方法級路由
(2)權(quán)限校驗(yàn):權(quán)限校驗(yàn)這塊采用的時(shí)AOP切面，環(huán)繞通知的方式來封裝實(shí)現(xiàn)的，通過在接口上增加一個(gè) @AuthPlugin來開啟權(quán)限校驗(yàn)，權(quán)限校驗(yàn)流程簡單來說分問兩個(gè)層級，第一級校驗(yàn)是否是有效用戶，這塊采用的是ceftoken比對來確認(rèn)，第二層則是確認(rèn)是否有權(quán)限訪問當(dāng)前接口，這塊則是讀表的方式來確認(rèn)

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

@AuthPlugin(serviceCode = "model-cancel", logLevel = LogRecordLevel.NO_NEED)
參數(shù)意義:服務(wù)名，這個(gè)需要和給用戶配置的服務(wù)權(quán)限一致；日志級別，權(quán)限校驗(yàn)同時(shí)集成了日志輸出功能，所以需要區(qū)分日志級別