業務場景---Token無感刷新
業務場景描述
假設用戶正在填寫一個復雜的表單，由于表單內容繁多，用戶花費了很長時間才填完。這時，如果Token已經過期，系統會讓用戶重新登錄，這種體驗顯然是非常糟糕的。為了避免這種情況，我們需要在Token即將過期或已經過期時，自動刷新Token，而不影響用戶正在進行的操作。
技術實現思路
一、準備工作
- 前端框架選擇：本文以Vue.js為例，結合Vue Router和Axios來實現Token無感刷新機制。
- 后端支持：后端需要提供刷新Token的接口，當接收到舊的Token時返回一個新的Token。
二、關鍵技術點
- 攔截請求：使用Axios攔截器來檢測每一個請求的狀態，如果發現Token過期，則觸發刷新Token的邏輯。
- 刷新Token：實現一個專門用于刷新Token的方法，該方法會在舊的Token過期時自動調用并更新Token。
- 請求隊列：在刷新Token期間，暫停其他需要Token的請求，待Token刷新成功后，重新發送這些請求。
三、具體實現步驟
1. 配置Axios攔截器
首先，配置Axios攔截器來檢測請求和響應的狀態，并在Token過期時觸發刷新Token的邏輯。
import axios from 'axios'; import store from './store'; // 假設使用Vuex來管理全局狀態 import router from './router'; let isRefreshing = false; let requests = []; axios.interceptors.request.use( config => { const token = store.state.token; if (token) { config.headers['Authorization'] = 'Bearer ' + token; } return config; }, error => { return Promise.reject(error); } ); axios.interceptors.response.use( response => { return response; }, error => { const { config, response } = error; const originalRequest = config; if (response && response.status === 401) { if (!isRefreshing) { isRefreshing = true; return refreshToken().then(newToken => { store.commit('setToken', newToken); originalRequest.headers['Authorization'] = 'Bearer ' + newToken; processQueue(null, newToken); return axios(originalRequest); }).catch(err => { processQueue(err, null); store.commit('logout'); router.push('/login'); return Promise.reject(err); }).finally(() => { isRefreshing = false; }); } else { return new Promise((resolve, reject) => { requests.push((token) => { originalRequest.headers['Authorization'] = 'Bearer ' + token; resolve(axios(originalRequest)); }); }); } } return Promise.reject(error); } ); function processQueue(error, token = null) { requests.forEach(promise => { if (error) { promise.reject(error); } else { promise.resolve(token); } }); requests = []; }
2. 實現刷新Token的方法
接下來，實現一個用于刷新Token的方法refreshToken。這個方法會調用后端接口來獲取新的Token。
function refreshToken() { return new Promise((resolve, reject) => { axios.post('/auth/refresh', { refreshToken: store.state.refreshToken }).then(response => { if (response.data.success) { resolve(response.data.token); } else { reject(response.data.message); } }).catch(error => { reject(error); }); }); }
3. 更新Vuex狀態管理
確保在Vuex中有相關的狀態和方法來管理Token和用戶登錄狀態。
const store = new Vuex.Store({ state: { token: localStorage.getItem('token') || '', refreshToken: localStorage.getItem('refreshToken') || '', user: {} }, mutations: { setToken(state, token) { state.token = token; localStorage.setItem('token', token); }, setRefreshToken(state, refreshToken) { state.refreshToken = refreshToken; localStorage.setItem('refreshToken', refreshToken); }, logout(state) { state.token = ''; state.refreshToken = ''; state.user = {}; localStorage.removeItem('token'); localStorage.removeItem('refreshToken'); } } });
4. 處理登錄邏輯
確保在用戶登錄時，正確地存儲Token和刷新Token。
function login(credentials) { return axios.post('/auth/login', credentials).then(response => { store.commit('setToken', response.data.token); store.commit('setRefreshToken', response.data.refreshToken); }); }
總結：當用戶在填寫復雜表單時，即使Token過期也不會中斷他們的操作，從而提供了更好的用戶體驗。這個機制不僅適用于表單填寫，還可以廣泛應用于任何需要長時間交互的Web應用場景中。
浙公網安備 33010602011771號