1.攔截器分爲request請求攔截器和response響應攔截器
PS:request請求攔截器:發送請求前統一處理,如:設置請求頭headers、應用的版本號、終端類型等。
response響應攔截器:有時候我們要根據響應的狀態碼來進行下一步操作,例如:由於當前的token過期,接口返回401未授權,那我們就要進行重新登錄的操作。
2.main.js文件中(先安裝axios)
import axios from 'axios'
// 給Vue函數添加一個原型屬性$axios指向axios(全局使用axios)
// vue實例中直接用this.$axios就可以執行axios方法
Vue.prototype.$axios=axios
3.http request 請求攔截器
PS:發送請求之前判斷是否存在token,除了登錄頁,其他頁面請求頭headers都添加token
// http request 請求攔截器
axios.interceptors.request.use(config => {
// 在發送請求之前做些什麼
let pathname = location.pathname;
if(localStorage.getItem('token')){
if(pathname != '/' && pathname != '/login'){
config.headers.common['token'] = localStorage.getItem('token');
}
}
return config;
}, error => {
// 對請求錯誤做些什麼
return Promise.reject(error);
});
4.http response 響應攔截器
PS:若返回401,頁面跳轉到登錄頁面
// http response 響應攔截器
axios.interceptors.response.use(response => {
return response;
},error => {
if (error.response) {
switch (error.response.status) {
// 返回401,清除token信息並跳轉到登錄頁面
case 401:
localStorage.removeItem('token');
router.replace({
path: '/login'
//登錄成功後跳入瀏覽的當前頁面
// query: {redirect: router.currentRoute.fullPath}
})
}
// 返回接口返回的錯誤信息
return Promise.reject(error.response.data);
}
});