Token是一種用于驗(yàn)證用戶身份的方式，Vue框架中使用Token來保護(hù)用戶的敏感信息。然而，當(dāng)Token過期后，用戶的請(qǐng)求將被服務(wù)器拒絕，這會(huì)影響用戶的使用體驗(yàn)。因此，我們需要在Vue中處理Token過期。

首先，我們需要在前端代碼中獲取Token的過期時(shí)間。一般情況下，Token會(huì)包含過期時(shí)間信息。我們可以使用如下代碼獲取Token的過期時(shí)間：

let token = localStorage.getItem('token');
let exp = JSON.parse(atob(token.split('.')[1])).exp;
let now = Math.floor(Date.now() / 1000);

代碼中，我們首先從本地存儲(chǔ)中獲取Token，然后解析出其中包含的過期時(shí)間。我們還獲取當(dāng)前時(shí)間的時(shí)間戳，以便后面進(jìn)行對(duì)比。

接下來，我們可以使用Vue的HTTP攔截器，來攔截請(qǐng)求并進(jìn)行Token過期處理。如下所示：

axios.interceptors.response.use(
function(response) {
return response;
},
function(error) {
let status = error.response.status;
if (status === 401) {
let token = localStorage.getItem('token');
let exp = JSON.parse(atob(token.split('.')[1])).exp;
let now = Math.floor(Date.now() / 1000);
if (now >exp) {
// Token過期，跳轉(zhuǎn)到登錄頁
location.href = '/login';
} else {
// Token未過期，刷新Token并重新發(fā)送請(qǐng)求
return axios.post('/api/refreshToken')
.then(response =>{
let newToken = response.data.token;
localStorage.setItem('token', newToken);
error.config.headers.Authorization = 'Bearer ' + newToken;
return axios(error.config);
})
.catch(error =>{
// 刷新Token失敗，跳轉(zhuǎn)到登錄頁
location.href = '/login';
});
}
} else {
return Promise.reject(error);
}
}
);

代碼中，我們使用axios的攔截器，在請(qǐng)求被服務(wù)器拒絕時(shí)進(jìn)行處理。如果返回的狀態(tài)碼為401，表明Token過期或未授權(quán)，我們就進(jìn)行Token過期處理。

如果Token已過期，我們就將用戶重定向到登錄頁，以便用戶重新登錄并獲取新的Token。如果Token未過期，我們就先嘗試刷新Token，然后重新發(fā)送請(qǐng)求。

如果刷新Token成功，我們就將新的Token存儲(chǔ)到本地，并在請(qǐng)求頭中加入Bearer Token。然后，我們重新發(fā)送請(qǐng)求，并返回Promise對(duì)象。如果刷新Token失敗，我們就將用戶重定向到登錄頁。

通過以上處理，我們可以在Vue中很好地處理Token過期問題，從而提高用戶的體驗(yàn)。