Vue+Node.js實現(xiàn)Token無感刷新的全流程指南
更新時間：2025年11月13日 09:41:03 作者：拉不動的豬
這篇文章主要為大家詳細介紹了Vue+Node.js結合Axios實現(xiàn)Token無感刷新的全流程,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下
頁面基本流程
- 登錄成功后，后端返回 Access Token 和 Refresh Token，前端存儲兩者及各自有效期。
- 每次發(fā)起業(yè)務請求前，前端判斷 Access Token 是否即將過期。
- 若即將過期，先調用 “刷新 Token 接口”，用有效的 Refresh Token 換取新的 Access Token。
- 用新的 Access Token 發(fā)起原業(yè)務請求，用戶全程無感知。
- 若 Refresh Token 也過期，才會引導用戶重新登錄。
一、技術棧與核心約定
前端：Vue 3（適配 Vue 2，只需微調語法）+ Axios（統(tǒng)一請求攔截）
后端：Node.js + Express + JWT（生成 Token）+ Redis（存儲 Refresh Token，可選但推薦）
Token 規(guī)則：
- Access Token：短期有效（1 小時），用于業(yè)務請求身份驗證
- Refresh Token：長期有效（7 天），僅用于刷新 Access Token
- 狀態(tài)碼：401 = Access Token 過期 / 無效；403 = Refresh Token 過期 / 無效
二、前端實現(xiàn)（核心代碼）
1. 初始化 Axios 實例（api/index.js）
封裝請求 / 響應攔截器，處理 Token 攜帶、刷新和重試邏輯
import axios from 'axios';
import { ElMessage } from 'element-plus'; // 按需引入UI組件庫提示（可選）
// 1. 創(chuàng)建Axios實例
const service = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL, // 環(huán)境變量配置后端地址
timeout: 5000, // 請求超時時間
});
// 2. Token存取工具函數(shù)（安全存儲建議用HttpOnly Cookie，此處用localStorage演示）
const TokenKey = {
ACCESS: 'access_token',
REFRESH: 'refresh_token',
};
// 獲取Token
const getAccessToken = () => localStorage.getItem(TokenKey.ACCESS);
const getRefreshToken = () => localStorage.getItem(TokenKey.REFRESH);
// 存儲新Token
const setTokens = (accessToken, refreshToken) => {
localStorage.setItem(TokenKey.ACCESS, accessToken);
localStorage.setItem(TokenKey.REFRESH, refreshToken);
};
// 清除Token（退出登錄用）
const removeTokens = () => {
localStorage.removeItem(TokenKey.ACCESS);
localStorage.removeItem(TokenKey.REFRESH);
};
// 3. 刷新狀態(tài)管理（防止并發(fā)請求重復刷新Token）
let isRefreshing = false; // 是否正在刷新Token
let requestQueue = []; // 等待刷新完成的請求隊列
// 4. 請求攔截器：自動給所有請求添加Access Token
service.interceptors.request.use(
(config) => {
const token = getAccessToken();
if (token) {
// 規(guī)范格式：Bearer + 空格 + Token（后端需對應解析）
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
(error) => Promise.reject(error)
);
// 5. 響應攔截器：處理Token過期邏輯
service.interceptors.response.use(
(response) => response.data, // 直接返回響應體，簡化業(yè)務層調用
async (error) => {
const { response, config } = error;
const originalRequest = config; // 原始失敗請求
// 僅處理401狀態(tài)碼（Access Token過期/無效），且排除刷新Token本身的請求
if (response?.status === 401 && originalRequest.url !== '/auth/refresh') {
// 避免重復刷新：正在刷新時，將請求加入隊列
if (isRefreshing) {
return new Promise((resolve) => {
requestQueue.push(() => {
// 刷新成功后，用新Token重試原始請求
originalRequest.headers.Authorization = `Bearer ${getAccessToken()}`;
resolve(service(originalRequest));
});
});
}
originalRequest._retry = true; // 標記該請求已進入重試流程
isRefreshing = true; // 開啟刷新狀態(tài)
try {
// 調用后端刷新接口，用Refresh Token換取新Token
const refreshToken = getRefreshToken();
if (!refreshToken) {
throw new Error('Refresh Token不存在');
}
const refreshRes = await service.post('/auth/refresh', {
refreshToken, // 傳給后端的Refresh Token
});
// 存儲新Token
const { accessToken, refreshToken: newRefreshToken } = refreshRes;
setTokens(accessToken, newRefreshToken);
// 重試隊列中所有等待的請求
requestQueue.forEach((callback) => callback());
requestQueue = []; // 清空隊列
// 重試當前失敗的請求
originalRequest.headers.Authorization = `Bearer ${accessToken}`;
return service(originalRequest);
} catch (refreshError) {
// 刷新失?。≧efresh Token過期/無效），強制跳轉登錄頁
removeTokens(); // 清除本地無效Token
ElMessage.error('登錄已過期，請重新登錄');
window.location.href = '/login'; // 跳轉到登錄頁
return Promise.reject(refreshError);
} finally {
isRefreshing = false; // 關閉刷新狀態(tài)
}
}
// 非401錯誤（如網(wǎng)絡錯誤、業(yè)務錯誤），直接拋出
ElMessage.error(error.message || '請求失敗');
return Promise.reject(error);
}
);
export default service;
2. 登錄與業(yè)務請求示例（api/user.js）
import service from './index';
// 登錄：獲取初始雙Token
export const login = (username, password) => {
return service.post('/auth/login', { username, password });
};
// 業(yè)務請求示例（無需手動處理Token）
export const getUserInfo = () => {
return service.get('/user/info');
};
// 退出登錄：清除Token
export const logout = () => {
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
window.location.href = '/login';
};
3. 登錄頁面使用示例（Login.vue）
<template>
<div>
<input v-model="username" placeholder="用戶名" />
<input v-model="password" type="password" placeholder="密碼" />
<button @click="handleLogin">登錄</button>
</div>
</template>
<script setup>
import { ref } from 'vue';
import { login } from '@/api/user';
import { ElMessage } from 'element-plus';
const username = ref('');
const password = ref('');
const handleLogin = async () => {
try {
// 調用登錄接口，后端返回accessToken和refreshToken
const res = await login(username.value, password.value);
// 存儲Token（實際已在api攔截器中處理，此處簡化）
localStorage.setItem('access_token', res.accessToken);
localStorage.setItem('refresh_token', res.refreshToken);
ElMessage.success('登錄成功');
window.location.href = '/home'; // 跳轉到首頁
} catch (error) {
ElMessage.error('登錄失敗，請檢查賬號密碼');
}
};
</script>
三、后端實現(xiàn)（Node.js + Express）
1. 依賴安裝
npm install express jsonwebtoken redis cors dotenv // 核心依賴
2. 核心配置（config.js）
require('dotenv').config();
module.exports = {
// JWT密鑰（生產環(huán)境需用環(huán)境變量，避免硬編碼）
JWT_SECRET: process.env.JWT_SECRET || 'your-secret-key-321',
// Token有效期
ACCESS_TOKEN_EXPIRES: '1h', // 1小時
REFRESH_TOKEN_EXPIRES: '7d', // 7天
// Redis配置（存儲Refresh Token，防止重復使用）
REDIS: {
host: 'localhost',
port: 6379,
db: 0,
},
};
3. JWT 工具函數(shù)（utils/jwt.js）
javascript
const jwt = require('jsonwebtoken');
const config = require('../config');
// 生成Token
const generateToken = (payload, expiresIn) => {
return jwt.sign(payload, config.JWT_SECRET, { expiresIn });
};
// 驗證Token
const verifyToken = (token) => {
try {
return jwt.verify(token, config.JWT_SECRET);
} catch (error) {
throw new Error('Token無效或已過期');
}
};
module.exports = { generateToken, verifyToken };
4. Redis 工具函數(shù)（utils/redis.js）
const redis = require('redis');
const config = require('../config');
// 創(chuàng)建Redis客戶端
const client = redis.createClient({
host: config.REDIS.host,
port: config.REDIS.port,
db: config.REDIS.db,
});
// 連接Redis
client.connect().catch((err) => console.error('Redis連接失敗:', err));
// 存儲Refresh Token（key: userId, value: refreshToken）
const setRefreshToken = async (userId, refreshToken) => {
// 有效期與Refresh Token一致（7天）
await client.setEx(`refresh_token:${userId}`, 60 * 60 * 24 * 7, refreshToken);
};
// 獲取Refresh Token
const getRefreshToken = async (userId) => {
return await client.get(`refresh_token:${userId}`);
};
// 刪除Refresh Token（退出登錄時）
const deleteRefreshToken = async (userId) => {
await client.del(`refresh_token:${userId}`);
};
module.exports = { setRefreshToken, getRefreshToken, deleteRefreshToken };
5. 核心接口實現(xiàn)（routes/auth.js）
const express = require('express');
const router = express.Router();
const { generateToken, verifyToken } = require('../utils/jwt');
const { setRefreshToken, getRefreshToken, deleteRefreshToken } = require('../utils/redis');
const config = require('../config');
// 模擬用戶數(shù)據(jù)庫（實際替換為MySQL/MongoDB）
const mockUsers = [
{ id: 1, username: 'admin', password: '123456' },
];
// 1. 登錄接口：生成雙Token
router.post('/login', (req, res) => {
const { username, password } = req.body;
// 驗證賬號密碼
const user = mockUsers.find(
(u) => u.username === username && u.password === password
);
if (!user) {
return res.status(400).json({ message: '賬號或密碼錯誤' });
}
// 生成雙Token（payload中存儲用戶唯一標識，避免敏感信息）
const accessToken = generateToken({ userId: user.id }, config.ACCESS_TOKEN_EXPIRES);
const refreshToken = generateToken({ userId: user.id }, config.REFRESH_TOKEN_EXPIRES);
// 存儲Refresh Token到Redis（用于后續(xù)驗證）
setRefreshToken(user.id, refreshToken);
// 返回雙Token給前端
res.json({
code: 200,
message: '登錄成功',
data: { accessToken, refreshToken },
});
});
// 2. 刷新Token接口：用有效Refresh Token換取新雙Token
router.post('/refresh', async (req, res) => {
const { refreshToken } = req.body;
if (!refreshToken) {
return res.status(403).json({ message: 'Refresh Token不能為空' });
}
try {
// 1. 驗證Refresh Token有效性
const payload = verifyToken(refreshToken);
const { userId } = payload;
// 2. 驗證Redis中存儲的Refresh Token是否一致（防止偽造）
const storedRefreshToken = await getRefreshToken(userId);
if (storedRefreshToken !== refreshToken) {
return res.status(403).json({ message: 'Refresh Token無效' });
}
// 3. 生成新的雙Token
const newAccessToken = generateToken({ userId }, config.ACCESS_TOKEN_EXPIRES);
const newRefreshToken = generateToken({ userId }, config.REFRESH_TOKEN_EXPIRES);
// 4. 更新Redis中的Refresh Token（滑動過期，增強安全性）
await setRefreshToken(userId, newRefreshToken);
// 5. 返回新Token
res.json({
code: 200,
data: { accessToken: newAccessToken, refreshToken: newRefreshToken },
});
} catch (error) {
return res.status(403).json({ message: 'Refresh Token已過期，請重新登錄' });
}
});
// 3. 退出登錄接口：刪除Redis中的Refresh Token
router.post('/logout', async (req, res) => {
const token = req.headers.authorization?.split(' ')[1];
if (!token) {
return res.status(400).json({ message: 'Token不能為空' });
}
try {
const payload = verifyToken(token);
await deleteRefreshToken(payload.userId);
res.json({ code: 200, message: '退出登錄成功' });
} catch (error) {
res.status(400).json({ message: '退出登錄失敗' });
}
});
module.exports = router;
6. 后端入口文件（app.js）
const express = require('express');
const cors = require('cors');
const authRouter = require('./routes/auth');
const app = express();
const port = 3001;
// 跨域配置（生產環(huán)境需限制origin）
app.use(cors());
// 解析JSON請求體
app.use(express.json());
// 掛載路由
app.use('/api/auth', authRouter);
// 啟動服務
app.listen(port, () => {
console.log(`后端服務啟動成功：http://localhost:${port}`);
});
四、關鍵注意事項（生產環(huán)境必看）
安全存儲 Token
- 不推薦用 localStorage 存儲（易受 XSS 攻擊），優(yōu)先用 HttpOnly Cookie 存儲 Refresh Token，前端無法讀取，避免竊取。
- Access Token 可存在內存（如 Vuex/Pinia），頁面刷新后通過 Cookie 獲取 Refresh Token 重新刷新。
防止重復刷新
用isRefreshing狀態(tài)和requestQueue隊列，避免多個并發(fā)請求同時觸發(fā)刷新接口，導致 Token 沖突。
Redis 的必要性
存儲 Refresh Token 到 Redis，支持 “強制登出”“單點登錄” 功能（如修改密碼后，刪除 Redis 中的舊 Refresh Token，強制用戶重新登錄）。
HTTPS 協(xié)議
生產環(huán)境必須啟用 HTTPS，防止 Token 在傳輸過程中被中間人竊取。
Token 有效期合理設置
- Access Token：15 分鐘～2 小時（越短越安全）。
- Refresh Token：7~30 天（平衡安全性和用戶體驗）。
五、完整流程梳理
用戶登錄 → 后端驗證賬號密碼 → 返回 Access Token 和 Refresh Token → 前端存儲。
前端發(fā)起業(yè)務請求 → 攔截器自動攜帶 Access Token → 后端驗證有效 → 返回業(yè)務數(shù)據(jù)。
若 Access Token 過期 → 后端返回 401 → 前端攔截器調用刷新接口。
刷新接口驗證 Refresh Token 有效 → 返回新雙 Token → 前端更新存儲，重試原始請求。
若 Refresh Token 過期 → 前端清除 Token，跳轉登錄頁。
以上就是Vue+Node.js實現(xiàn)Token無感刷新的全流程指南的詳細內容，更多關于Vue Token無感刷新的資料請關注腳本之家其它相關文章！
相關文章
src/main.js是入口文件,主要作用是初始化vue實例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊的組件能夠被全局使用,本文通過實例代碼介紹vue項目中main.js的用法,感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了Vue中SourceMap的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
這篇文章主要介紹了淺談一下Vue技術棧之生命周期,每一個vue實例從創(chuàng)建到銷毀的過程，就是這個vue實例的生命周期,這些過程中會伴隨著一些函數(shù)的自調用,需要的朋友可以參考下2023-05-05
這篇文章主要為大家詳細介紹了vue中音頻wavesurfer.js的使用方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了仿vue-cli搭建屬于自己的腳手架的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
本文主要介紹一下Vue SPA 路由跳轉無法回到頂部問題排查與解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-06-06
今天小編就為大家分享一篇vue-cli監(jiān)聽組件加載完成的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了如何利用Vue2實現(xiàn)簡單基礎的圖片裁剪功能，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起了解一下2022-09-09
這篇文章主要介紹了Antd中單個DatePicker限定時間輸入范圍操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
今天小編就為大家分享一篇vue路由守衛(wèi),限制前端頁面訪問權限的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11