vue+axios 前端實(shí)現(xiàn)的常用攔截的代碼示例

//定義一個(gè)請(qǐng)求攔截器
Axios.interceptors.request.use(function(config){
 store.state.isShow=true; //在請(qǐng)求發(fā)出之前進(jìn)行一些操作
 return config
})
//定義一個(gè)響應(yīng)攔截器
Axios.interceptors.response.use(function(config){
 store.state.isShow=false;//在這里對(duì)返回的數(shù)據(jù)進(jìn)行處理
 return config
})

router.beforeEach((to, from, next) => {
 if (to.meta.requireAuth) { // 判斷該路由是否需要登錄權(quán)限
 if (store.state.token) { // 通過vuex state獲取當(dāng)前的token是否存在
 next();
 }
 else {
 next({
 path: '/login',
 query: {redirect: to.fullPath} // 將跳轉(zhuǎn)的路由path作為參數(shù)，登錄成功后跳轉(zhuǎn)到該路由
 })
 }
 }
 else {
 next();
 }
})

// http request 攔截器
axios.interceptors.request.use(
 config => {
 if (store.state.token) { // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
 config.headers.Authorization = `token ${store.state.token}`;
 }
 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:
 // 返回 401 清除token信息并跳轉(zhuǎn)到登錄頁面
 store.commit(types.LOGOUT);
 router.replace({
 path: 'login',
 query: {redirect: router.currentRoute.fullPath}
 })
 }
 }
 return Promise.reject(error.response.data) // 返回接口返回的錯(cuò)誤信息
 });

/**
 * http配置
 */
// 引入axios以及element ui中的loading和message組件
import axios from 'axios'
import { Loading, Message } from 'element-ui'
// 超時(shí)時(shí)間
axios.defaults.timeout = 5000
// http請(qǐng)求攔截器
var loadinginstace
axios.interceptors.request.use(config => {
 // element ui Loading方法
 loadinginstace = Loading.service({ fullscreen: true })
 return config
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加載超時(shí)'
 })
 return Promise.reject(error)
})
// http響應(yīng)攔截器
axios.interceptors.response.use(data => {// 響應(yīng)成功關(guān)閉loading
 loadinginstace.close()
 return data
}, error => {
 loadinginstace.close()
 Message.error({
 message: '加載失敗'
 })
 return Promise.reject(error)
})
 
export default axios

Vue.prototype.$http.interceptors.response.use()