Vue.js 是一種流行的 JavaScript 框架，它使用了響應式編程的方式來解決開發中的問題。Vue.js 還提供了一套工具和插件來加速開發流程，Axios 是其中一個工具之一，它使用 Promise 管理 HTTP 請求和響應。Auth 是 Axios 的另一個重要概念，它簡化了認證和授權的流程。

Vue 通過 Axios 進行網絡請求時，可以使用 Auth 功能來自動將認證信息添加到請求頭中。這可以是非常有用的，因為這樣可以防止未經授權的用戶訪問受保護的資源。

import axios from 'axios';
import { getToken } from './auth';
// 創建 axios 實例
const instance = axios.create({
baseURL: 'http://api.example.com',
timeout: 10000,
});
// 在請求頭中添加 Token
instance.interceptors.request.use(
(config) =>{
const token = getToken();
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) =>{
return Promise.reject(error);
},
);
// 發送 GET 請求
instance.get('/users')
.then((response) =>{
console.log(response.data);
})
.catch((error) =>{
console.error(error);
});

在上面的代碼中，我們首先導入 Axios 模塊，并從我們的自定義 auth 模塊中獲取認證 Token。我們接著創建了一個 Axios 實例，并使用instance.interceptors.request.use()方法添加了一個攔截器，每次請求前都會在請求頭中添加認證信息。我們最后發送了一個 GET 請求，并在 then() 中處理返回結果。

需要注意的是，這種自動認證的方式只適用于 Token-based 認證。如果你使用了其他類型的認證方式，或者使用了 OAuth 授權協議，你需要通過其他方式添加認證信息。