在使用Vue進行項目開發時，我們通常會涉及到前端和后端的交互，而對于使用API接口調用的情況，認證和授權是非常重要的一部分。在這種情況下，我們通常需要設置token才能完成認證和授權。接下來，我們將一步步介紹如何在Vue中設置token。

第一步是在后端API中設置token。我們需要對API調用進行驗證，在驗證通過后才能返回數據。為此，在API的響應header中，我們需要添加一個名為Authorization的鍵，它的值是從服務器獲得的令牌。在進行API請求時，Vue會從瀏覽器中取出此令牌，然后在 API調用時將其發送到服務器，以便進行身份驗證。

為了在 Vue 中設置token，我們需要使用axios。Vue中的axios是一個基于Promise的HTTP客戶端，可以將瀏覽器的XMLHttpRequest自動轉換為JSON（JavaScript Object Notation）格式。在引入axios項目中后，我們需要在Vue中創建一個Service對象，用來封裝API調用并完成token驗證。

import axios from 'axios';
const TOKEN_KEY = 'access_token';
export default class ApiService {
constructor() {
this.http = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
headers: {
'Content-Type': 'application/json'
}
});
this.http.interceptors.request.use(
config =>{
const token = localStorage.getItem(TOKEN_KEY);
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
}
);
}
}

在上面的代碼片段中，我們定義了一個名為ApiService的類。在構造函數中，我們使用axios.create方法創建了一個名為http的請求配置對象，其中包含了API的基礎URL和請求頭。使用the http對象的interceptors屬性，我們攔截了每個請求，并檢查localStorage中是否有名為access_token的值（在本部分中作為token使用）。如果有，則將其添加到Authorization標頭中，并將修改后的config對象返回，否則返回未修改的config對象。

要使用ApiService，我們需要創建一個名為apiService的單例對象，并在Vue中注入它：

import ApiService from './api.service';
const apiService = new ApiService();
Vue.prototype.$apiService = apiService;

在上述代碼塊中，我們首先將ApiService導入到我們的項目中。然后，我們創建一個名為apiService的單例對象，然后將其添加到Vue.prototype中。這樣，我們無論在Vue組件，任何位置都可以調用 $apiService 對象?，F在，我們已經完成了Vue中的token設置，并可以在我們的后臺API中加入身份驗證和授權。