Vue的攔截器是一個非常有用的特性。它允許我們在每個請求發出和收到之前和之后執行一些操作。例如，我們可以添加一個攔截器用于驗證用戶的 token，以便在用戶的 token 過期時及時跳轉到登錄頁面。

下面是一個基本的攔截器例子：

import axios from 'axios';
// 創建 Axios 實例
const axiosInstance = axios.create();
// 添加請求攔截器
axiosInstance.interceptors.request.use((config) =>{
// 在請求發送之前做一些操作，例如添加請求頭
return config;
}, (error) =>{
// 請求錯誤時的操作
return Promise.reject(error);
});
// 添加響應攔截器
axiosInstance.interceptors.response.use((response) =>{
// 在響應數據之前做一些操作（例如格式化數據）
return response;
}, (error) =>{
// 響應錯誤時的操作
return Promise.reject(error);
});
export default axiosInstance;

在這個例子中，我們首先創建了一個 axios 實例，并添加了請求和響應攔截器。請求攔截器的目的是在發送請求之前做一些操作，例如添加請求頭。響應攔截器的目的是在響應數據之前做一些操作，例如格式化數據。

攔截器是非常靈活的，你可以根據需要添加、移除或修改攔截器。例如，如果你只想在特定路由上攔截請求，你可以使用以下代碼：

import axiosInstance from './axios-instance';
// 添加攔截器
const interceptor = axiosInstance.interceptors.request.use((config) =>{
// 只在特定路由上添加請求頭
if (config.url.includes('/users')) {
config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
}
return config;
});
// 在路由離開時移除攔截器
router.beforeEach((to, from, next) =>{
axiosInstance.interceptors.request.eject(interceptor);
next();
});

在這個例子中，我們在特定的路由上添加了請求頭，并在路由離開時移除了攔截器。這樣能夠確保我們只在需要時攔截請求。