起因
最近在做一個(gè)項(xiàng)目前端框架使用的是vue酪惭，項(xiàng)目接近尾聲的時(shí)候發(fā)現(xiàn)需要增加一個(gè)對(duì)所有的http請(qǐng)求過(guò)濾的功能油宜，所有的請(qǐng)求需要加上token再發(fā)送給服務(wù)器掂碱，服務(wù)器根據(jù)token判斷用戶(hù)身份是否有效，響應(yīng)也需要過(guò)濾慎冤，判斷是否授權(quán)疼燥，進(jìn)行統(tǒng)一處理。經(jīng)過(guò)調(diào)研發(fā)現(xiàn)蚁堤，很多大佬推薦了vue-resource的interceptors攔截器醉者，但是由于vue的作者尤雨溪已經(jīng)聲明不再對(duì)vue-resource進(jìn)行維護(hù)，建議大家使用axios，所以果斷pass掉了這個(gè)方法撬即。然后發(fā)現(xiàn)立磁，axios提供了interceptors關(guān)鍵字實(shí)現(xiàn)攔截器的功能，下面就詳細(xì)說(shuō)明攔截器的實(shí)現(xiàn)剥槐。
第一步
在閱讀相關(guān)資料的時(shí)候唱歧，有兩種方法可以實(shí)現(xiàn)攔截器，設(shè)置配置文件和重新封裝axios粒竖，在嘗試第一種方法時(shí)會(huì)出現(xiàn)了無(wú)法解決的問(wèn)題颅崩，無(wú)果，故采用了重新封裝axios的方法蕊苗，首先在項(xiàng)目文件下新建utils文件夾沿后，在該文件夾下新建文件httpAxios.js。
├── src
| ├──example.vue
| └──utils
| ├──httpAxios.js
第二步
http請(qǐng)求攔截器朽砰，首先對(duì)http的請(qǐng)求進(jìn)行攔截尖滚，將所有的http請(qǐng)求報(bào)文的header加上Authorization字段，內(nèi)容為token锅移，token之前通過(guò)vuex保存在store中熔掺。代碼如下：
// http request 攔截器
axios.interceptors.request.use(
(config) => {
if(store.state.token) {
config.headers.Authorization = `${store.state.token}`; // token保存在store中
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
第三步
http響應(yīng)攔截器，對(duì)所有response進(jìn)行判斷非剃，401狀態(tài)碼表示未授權(quán)置逻，代碼如下：
// http response 攔截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if(error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
});
}
}
return Promise.reject(error.response.data);
}
);
不過(guò)我司的授權(quán)并不是經(jīng)過(guò)瀏覽器實(shí)現(xiàn)的，是通過(guò)約定好的錯(cuò)誤碼來(lái)表示用戶(hù)登錄失效备绽，所以我并沒(méi)有在error中進(jìn)行處理券坞，而是在response中判斷錯(cuò)誤碼來(lái)處理的。
最后整個(gè)httpAxios.js文件的內(nèi)容是：
import Vue from 'vue';
import axios from 'axios';
import store from '../store/';
// 默認(rèn)配置
axios.defaults.baseURL = 'http://www.xxxx.com';
axios.defaults.headers.post['Content-Type'] = 'application/json';
export const request = (config) => {
return axios(config);
};
// http request 攔截器
axios.interceptors.request.use(
(config) => {
if(store.state.token) {
config.headers.Authorization = `${store.state.token}`; // token保存在store中
}
return config;
},
(err) => {
return Promise.reject(err);
}
);
// http response 攔截器
axios.interceptors.response.use(
(response) => {
return response;
},
(error) => {
if(error.response) {
switch (error.response.status) {
case 401:
router.replace({
path: '/login',
query: {redirect: router.currentRoute.fullPath}
});
}
}
return Promise.reject(error.response.data);
}
);
第四步
既然重新封裝了axios肺素，那么使用方法當(dāng)然會(huì)有一些變化恨锚，下面舉例說(shuō)明使用方法。如果要在example.vue中使用該插件倍靡，那么example.vue文件中應(yīng)該這樣寫(xiě)：
import {request} from '/utils/httpAxios.js';
request({ method: 'post', url: '', data: {}
}). then(function (response) {
//處理成功的請(qǐng)求
}). catch(function (error) {
sonsole.log(error);
});
那么猴伶，http攔截器就完工了，可以愉快地使用了~
再啰嗦一句
第一次寫(xiě)文章塌西，希望能與大家分享技術(shù)踩過(guò)的坑他挎，走過(guò)的路，也希望能和大家多多交流捡需，共同進(jìn)步办桨。
