vue 无法进入response拦截器_vue拦截器的一次实践
起因
最近在做一個項目前端框架使用的是vue，項目接近尾聲的時候發(fā)現(xiàn)需要增加一個對所有的http請求過濾的功能，所有的請求需要加上token再發(fā)送給服務(wù)器，服務(wù)器根據(jù)token判斷用戶身份是否有效，響應(yīng)也需要過濾，判斷是否授權(quán)，進行統(tǒng)一處理。經(jīng)過調(diào)研發(fā)現(xiàn)，很多大佬推薦了vue-resource的interceptors攔截器，但是由于vue的作者尤雨溪已經(jīng)聲明不再對vue-resource進行維護，建議大家使用axios，所以果斷pass掉了這個方法。然后發(fā)現(xiàn)，axios提供了interceptors關(guān)鍵字實現(xiàn)攔截器的功能，下面就詳細說明攔截器的實現(xiàn)。
第一步
在閱讀相關(guān)資料的時候，有兩種方法可以實現(xiàn)攔截器，設(shè)置配置文件和重新封裝axios，在嘗試第一種方法時會出現(xiàn)了無法解決的問題，無果，故采用了重新封裝axios的方法，首先在項目文件下新建utils文件夾，在該文件夾下新建文件httpAxios.js。
├── src
| ├──example.vue
| └──utils
| ├──httpAxios.js
第二步
http請求攔截器，首先對http的請求進行攔截，將所有的http請求報文的header加上Authorization字段，內(nèi)容為token，token之前通過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)攔截器，對所有response進行判斷，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);
}
);
不過我司的授權(quán)并不是經(jīng)過瀏覽器實現(xiàn)的，是通過約定好的錯誤碼來表示用戶登錄失效，所以我并沒有在error中進行處理，而是在response中判斷錯誤碼來處理的。
最后整個httpAxios.js文件的內(nèi)容是：
import Vue from 'vue';
import axios from 'axios';
import store from '../store/';
// 默認配置
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)然會有一些變化，下面舉例說明使用方法。如果要在example.vue中使用該插件，那么example.vue文件中應(yīng)該這樣寫：
import {request} from '/utils/httpAxios.js';
request({ method: 'post', url: '', data: {}
}). then(function (response) {
//處理成功的請求
}). catch(function (error) {
sonsole.log(error);
});
那么，http攔截器就完工了，可以愉快地使用了~
再啰嗦一句
第一次寫文章，希望能與大家分享技術(shù)踩過的坑，走過的路，也希望能和大家多多交流，共同進步。
總結(jié)
以上是生活随笔為你收集整理的vue 无法进入response拦截器_vue拦截器的一次实践的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 测电脑网速怎么测(测电脑网速怎么测的)
- 下一篇： hide show vue 动画_jQu