在Vue應(yīng)用程序中，我們可能需要從前端向后端發(fā)送請求來獲取數(shù)據(jù)和交互，但是一些請求受到安全限制，需要用戶身份驗(yàn)證，這時(shí)候就需要在請求頭中加上Token。

Token是用來驗(yàn)證用戶身份的一種技術(shù)，它是服務(wù)器生成的一串字符串，可以識別用戶身份。在HTTP協(xié)議中，我們可以通過設(shè)置請求頭Authorization字段來傳遞Token。通常使用Bearer Token，即在Authorization字段內(nèi)容中加上Bearer關(guān)鍵字。

headers: {
'Authorization': 'Bearer ' + token
}

在Vue應(yīng)用程序中發(fā)送帶有Token的請求，我們可以使用axios庫來發(fā)送請求，axios是一個(gè)基于Promise的HTTP庫，可以用在瀏覽器和Node.js中。首先，在Vue項(xiàng)目中安裝axios：

npm install axios --save

然后在需要發(fā)送請求的地方引入axios：

import axios from 'axios';

然后在發(fā)送請求的時(shí)候，在請求頭中添加Authorization字段：

async function fetchData() {
const token = 'your_token_here';
try {
const response = await axios.get('https://api.example.com/data', {
headers: {
'Authorization': 'Bearer ' + token
}
});
console.log(response.data);
} catch(error) {
console.log(error);
}
}

在上面的例子中，我們使用了async/await語法來處理異步請求，并且在請求頭中添加了Authorization字段。

如果我們需要在多個(gè)請求中添加Token，我們可以創(chuàng)建一個(gè)攔擊器，在請求被發(fā)送之前自動(dòng)添加請求頭。在Vue項(xiàng)目中的main.js文件中添加如下代碼：

import axios from 'axios';
axios.interceptors.request.use(function(config) {
const token = localStorage.getItem('token');
if(token) {
config.headers.Authorization = 'Bearer ' + token;
}
return config;
}, function(error) {
return Promise.reject(error);
});
Vue.prototype.$http = axios;

在上面的例子中，我們使用了localStorage來存儲用戶Token，然后在攔擊器中自動(dòng)添加請求頭。然后將axios設(shè)置為Vue的原型屬性，可以在全局使用。

在這篇文章中，我們介紹了在Vue應(yīng)用程序中發(fā)送帶有Token的請求的方法，在請求頭中添加Authorization字段，并且使用axios庫進(jìn)行請求，并使用攔擊器來自動(dòng)添加請求頭。這種方法可以保證請求的安全性，并且可以在多個(gè)請求中使用相同的Token。