在進行Web開發過程中，經常需要從前端向后端發起HTTP請求。某些情況下，為了保證數據的安全性，需要對請求進行認證，這就需要使用到Token。Token是一種用于驗證用戶身份的數字憑證，存在于請求頭中。在Vue中，發送請求需要使用axios庫，本文將詳細介紹如何在Vue中發送請求攜帶Token。

首先，需要在Vue項目中安裝axios庫。可以使用npm或者yarn進行安裝。

npm install axios --save

或者

yarn add axios

安裝完成后，在Vue的Main.js中進行引入和配置。這里需要使用axios的攔截器，設置全局的請求頭信息。

import axios from 'axios'
axios.interceptors.request.use(
config =>{
const token = sessionStorage.getItem('Token')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
},
error =>{
return Promise.reject(error)
}
)
Vue.prototype.$http = axios

上面代碼中，通過sessionStorage獲取Token并設置請求頭信息。其中，Bearer是一種Token認證方式，必須在Token前加上該字符串。

在需要發起請求的組件中，可以使用Vue的$http對象進行請求。在請求中攜帶Token需要在請求頭中添加Authorization字段，其值為Bearer加上Token的值。

this.$http.get('/api/data', { headers: { Authorization: `Bearer ${sessionStorage.getItem('Token')}` } })

上面代碼中，使用了Vue的HTTP實例進行了GET請求，并在請求頭中攜帶了Token信息。

除了使用攔截器和設置請求頭信息外，還可以使用Vuex來管理Token信息。將Token保存在Vuex中，然后在請求頭中獲取Token進行請求。

在Vuex的store.js文件中，保存Token信息。

const store = new Vuex.Store({
state: {
token: null
},
mutations: {
setToken(state, payload) {
state.token = payload
}
}
})

在登錄成功后，將Token信息保存到Vuex中。

this.$http.post('/api/login', postData).then(response =>{
store.commit('setToken', response.data.token)
})

在需要發送請求的組件中，可以使用Vuex的getters獲取Token信息，再將其拼接到請求頭中發送請求。

this.$http.get('/api/data', { headers: { Authorization: `Bearer ${this.$store.getters.getToken}` } })

上面代碼中，使用Vuex的getters獲取Token信息，并在請求頭中攜帶了Token信息。

總的來說，在Vue中發送請求攜帶Token需要配置axios攔截器和設置請求頭信息，也可以使用Vuex來管理Token信息，以便在請求時獲取Token信息。以上是關于Vue請求攜帶Token的詳細介紹，希望對大家有所幫助。