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