在前端項(xiàng)目中，Token 通常用于用戶認(rèn)證和權(quán)限管理。無(wú)論是基于 JWT (JSON Web Token) 還是其他類(lèi)型的 Token，它們往往有一個(gè)過(guò)期時(shí)間。當(dāng) Token 過(guò)期時(shí)，用戶的操作會(huì)受到影響，因此我們需要一種無(wú)感知（或“靜默”）的方式來(lái)刷新 Token，確保用戶在會(huì)話中的操作不會(huì)中斷。

本文將介紹如何在 Vue 項(xiàng)目中實(shí)現(xiàn) Token 的無(wú)感刷新，包括 Token 刷新的原理、攔截器的應(yīng)用以及如何處理 Token 過(guò)期。

一、Token 刷新的背景

通常，Token 分為兩種：

• 訪問(wèn)令牌 (Access Token)：用于每次請(qǐng)求時(shí)驗(yàn)證用戶身份，通常有效期較短。
• 刷新令牌 (Refresh Token)：用于刷新訪問(wèn)令牌，當(dāng)訪問(wèn)令牌過(guò)期時(shí)，可以使用刷新令牌獲取新的訪問(wèn)令牌。

在實(shí)際應(yīng)用中，訪問(wèn)令牌的有效期較短，主要是為了安全性。當(dāng)訪問(wèn)令牌過(guò)期時(shí)，我們不想強(qiáng)制用戶重新登錄，而是通過(guò)刷新令牌來(lái)獲取新的訪問(wèn)令牌，從而實(shí)現(xiàn)無(wú)感刷新。

二、無(wú)感 Token 刷新的實(shí)現(xiàn)原理

無(wú)感刷新是指在用戶不感知的情況下，當(dāng) Token 過(guò)期時(shí)自動(dòng)刷新并重新發(fā)起請(qǐng)求。這個(gè)過(guò)程通常包含以下步驟：

• 每次發(fā)起請(qǐng)求時(shí)，檢查訪問(wèn)令牌的有效性。
• 如果訪問(wèn)令牌過(guò)期，暫停當(dāng)前請(qǐng)求并使用刷新令牌獲取新的訪問(wèn)令牌。
• 使用新的訪問(wèn)令牌重新發(fā)起之前被暫停的請(qǐng)求。
• 更新應(yīng)用中的 Token 信息。

三、在 Vue 項(xiàng)目中實(shí)現(xiàn) Token 無(wú)感刷新

在 Vue 項(xiàng)目中，我們通常使用 Axios 來(lái)處理 HTTP 請(qǐng)求。為了實(shí)現(xiàn)無(wú)感刷新，我們可以使用 Axios 的攔截器來(lái)攔截請(qǐng)求和響應(yīng)，檢測(cè) Token 是否過(guò)期，并在需要時(shí)自動(dòng)刷新。

1. 配置 Axios 攔截器

首先，我們需要設(shè)置 Axios 的請(qǐng)求和響應(yīng)攔截器：

import axios from 'axios'; import store from '@/store'; // 假設(shè)我們將 token 保存在 Vuex 中 import router from '@/router'; 
const apiClient = axios.create({
 baseURL: process.env.VUE_APP_API_BASE_URL,
 timeout: 10000 
});
 // 請(qǐng)求攔截器，攜帶 token 
apiClient.interceptors.request.use( config => 
{ const accessToken = store.getters['auth/accessToken']; 
if (accessToken) 
{ config.headers['Authorization'] = `Bearer ${accessToken}`; }
 return config; 
}, error => { 
return Promise.reject(error); }
 ); 
// 響應(yīng)攔截器，檢查 token 是否過(guò)期
 apiClient.interceptors.response.use( response => { return response; },
 async error => { const originalRequest = error.config; 
const refreshToken = store.getters['auth/refreshToken']; 
// 檢查是否是認(rèn)證錯(cuò)誤（如 401） 
if (error.response.status === 401 && !originalRequest._retry && refreshToken) { originalRequest._retry = true; 
// 嘗試使用刷新令牌獲取新的訪問(wèn)令牌 
try { const response = await axios.post('/auth/refresh', { token: refreshToken });
 const newAccessToken = response.data.accessToken; 
// 更新存儲(chǔ)中的 token store.commit('auth/SET_ACCESS_TOKEN', newAccessToken); 
// 重新發(fā)起之前失敗的請(qǐng)求 
originalRequest.headers['Authorization'] = `Bearer ${newAccessToken}`; 
return apiClient(originalRequest); } 
catch (refreshError) { 
// 刷新失敗，跳轉(zhuǎn)到登錄頁(yè)面 
store.commit('auth/LOGOUT');
 router.push('/login'); } } 
return Promise.reject(error); } ); 
export default apiClient;

2. 關(guān)鍵點(diǎn)解析

• 請(qǐng)求攔截器：在每次請(qǐng)求發(fā)送前，檢查 accessToken 是否存在，并將其添加到請(qǐng)求頭的 Authorization 字段中，確保后端可以識(shí)別用戶身份。

• 響應(yīng)攔截器：如果響應(yīng)狀態(tài)碼為 401，說(shuō)明訪問(wèn)令牌無(wú)效或過(guò)期。此時(shí)，會(huì)嘗試使用 refreshToken 請(qǐng)求新的 accessToken。成功后，更新 store 中的 accessToken 并重新發(fā)起之前失敗的請(qǐng)求。

3. Vuex 管理 Token

為了更好地管理 Token，我們可以使用 Vuex 來(lái)存儲(chǔ)和更新 Token 信息。

// store/modules/auth.js
 const state = { accessToken: localStorage.getItem('accessToken') || '', refreshToken: localStorage.getItem('refreshToken') || '' }; 
const getters = { accessToken: state => state.accessToken, 
refreshToken: state => state.refreshToken }; 
const mutations = { 
SET_ACCESS_TOKEN(state, token) { state.accessToken = token; 
localStorage.setItem('accessToken', token); }, 
SET_REFRESH_TOKEN(state, token) { state.refreshToken = token;
 localStorage.setItem('refreshToken', token); }, 
LOGOUT(state) { state.accessToken = ''; 
state.refreshToken = ''; 
localStorage.removeItem('accessToken'); 
localStorage.removeItem('refreshToken'); } };
 export default { state, getters, mutations };

在 Vuex 中，我們使用 localStorage 來(lái)持久化 accessToken 和 refreshToken，這樣即使用戶刷新頁(yè)面，Token 也不會(huì)丟失。

四、自動(dòng)刷新和用戶體驗(yàn)

Token 無(wú)感刷新極大地提升了用戶體驗(yàn)，因?yàn)橛脩粼?Token 過(guò)期時(shí)無(wú)需重新登錄。但需要注意以下幾點(diǎn)：

• 安全性：刷新令牌的有效期應(yīng)比訪問(wèn)令牌長(zhǎng)，且只能使用一次，防止濫用。
• 定時(shí)刷新：可以在前端設(shè)置一個(gè)定時(shí)器，在 Token 過(guò)期前自動(dòng)刷新，而不是等到請(qǐng)求 401 錯(cuò)誤時(shí)才刷新。
• 用戶操作：在刷新令牌也過(guò)期時(shí)，需要引導(dǎo)用戶重新登錄。

五、總結(jié)

在 Vue 項(xiàng)目中實(shí)現(xiàn)無(wú)感 Token 刷新，可以確保用戶在 Token 過(guò)期時(shí)不會(huì)被強(qiáng)制登出或中斷操作。通過(guò) Axios 攔截器和 Vuex 的結(jié)合，我們可以實(shí)現(xiàn)自動(dòng)化的 Token 管理和刷新流程。這不僅提升了安全性，也為用戶提供了更加流暢的使用體驗(yàn)。

到此這篇關(guān)于Vue項(xiàng)目中實(shí)現(xiàn)無(wú)感Token刷新的示例的文章就介紹到這了,更多相關(guān)Vue 無(wú)感Token刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論