vue中axios攔截器的使用

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