在前后端分離的開發中，JSON Web Token (JWT) 已成為一種非常流行的認證方式，而 Axios 是一種優秀的處理 HTTP 請求的 JavaScript 庫。在 Vue 項目中使用 JWT 和 Axios 可以方便地實現用戶認證和對 API 的訪問。

首先，我們需要將 JWT 存儲在前端以便發送到服務器。可以通過兩種方式將 JWT 在瀏覽器中存儲：使用 Cookie 或者使用 localStorage。這里使用 localStorage 進行示例。在登錄成功后，將 JWT 存儲到 localStorage 中，調用 Vue.prototype.$http.defaults.headers.common 為每個請求添加 Authorization 頭部，可以在每個請求中添加 JWT：

localStorage.setItem('jwt', token);
Vue.prototype.$http.defaults.headers.common['Authorization'] = 'Bearer ' + token;

接下來，需要配置 Axios 發送帶有 JWT 的請求。這里使用 Axios 的攔截器，在請求發送前驗證是否存在 JWT 并添加 Authorization 頭部。可以創建一個名為 Http.js 的文件，導出一個 pre-configured Axios 實例：

import axios from 'axios';
const axiosInstance = axios.create({
baseURL: process.env.VUE_APP_API_URL,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
}
});
axiosInstance.interceptors.request.use((config) =>{
const token = localStorage.getItem('jwt');
if (token) {
config.headers['Authorization'] = 'Bearer ' + token;
}
return config;
}, (error) =>{
return Promise.reject(error);
});
export default axiosInstance;

在配置中，設置了基本的 baseURL 和 headers。設置攔截器后，每次請求都會先執行該函數，用 localStorage 中的 JWT 添加 Authorization 頭部。

最后，在需要發送請求時，只需導入 Http.js 并使用它發送請求：

import Http from '@/utils/Http';
export default {
methods: {
getUser() {
return Http.get('/user');
}
}
}

通過示例代碼，我們可以看到 JWT 和 Axios 配置在 Vue 項目中處理 API 請求非常方便。我們只需要在登錄成功后將 JWT 存儲到本地存儲中，在每個請求中添加 JWT，并在需要發送請求時導入 axios 對象。整個過程都非常簡單和直觀，非常適合在 Vue 項目中使用。