双 Token 无感刷新机制在前后端分离架构中实现

server/2025/3/18 20:00:33/

在前后端分离的架构中,双 Token 无感刷新是一种常见的身份验证机制,用于在 Access Token 过期时,通过 Refresh Token 自动获取新的 Access Token,从而避免用户频繁登录。


1. 双 Token 无感刷新的核心流程

1.1 核心流程

  1. 用户登录

    • 前端发送用户名和密码到后端
    • 后端验证成功后,返回 Access TokenRefresh Token
    • 前端将这两个 Token 存储在本地(如 localStorageCookie)。
  2. Access Token 过期

    • 前端发起请求时,携带 Access Token
    • 如果 Access Token 过期,后端返回 401 Unauthorized 错误。
  3. 自动刷新 Token

    • 前端检测到 401 错误后,使用 Refresh Token 请求新的 Access Token
    • 后端验证 Refresh Token 的有效性,如果有效,返回新的 Access Token
    • 前端更新本地存储的 Access Token,并重试之前的请求。
  4. Refresh Token 过期

    • 如果 Refresh Token 也过期,后端返回 401 错误。
    • 前端清除本地存储的 Token,并跳转到登录页面。

2. 前端实现(React + TypeScript)

2.1 配置 Axios 拦截器

Axios 拦截器用于在请求发送前和响应返回后执行逻辑,是实现无感刷新的核心。

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, AxiosError } from 'axios';// 创建 Axios 实例
const api: AxiosInstance = axios.create({baseURL: 'https://your-api-url.com',headers: {'Content-Type': 'application/json',},
});// 请求拦截器:在请求头中添加 Access Token
api.interceptors.request.use((config: AxiosRequestConfig) => {const accessToken = localStorage.getItem('accessToken');if (accessToken) {config.headers.Authorization = `Bearer ${accessToken}`;}return config;},(error: AxiosError) => {return Promise.reject(error);}
);// 响应拦截器:处理 Access Token 过期
api.interceptors.response.use((response: AxiosResponse) => {return response;},async (error: AxiosError) => {const originalRequest = error.config;// 检测到 401 错误且未重试过if (error.response?.status === 401 && !originalRequest._retry) {originalRequest._retry = true; // 标记请求已重试try {// 使用 Refresh Token 获取新的 Access Tokenconst refreshToken = localStorage.getItem('refreshToken');const response = await axios.post('https://your-api-url.com/refresh-token', { refreshToken });const { accessToken } = response.data;// 更新本地存储的 Access TokenlocalStorage.setItem('accessToken', accessToken);api.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;originalRequest.headers['Authorization'] = `Bearer ${accessToken}`;// 重试原始请求return api(originalRequest);} catch (refreshError) {// 刷新 Token 失败,清除本地存储并跳转到登录页localStorage.removeItem('accessToken');localStorage.removeItem('refreshToken');window.location.href = '/login';return Promise.reject(refreshError);}}return Promise.reject(error);}
);export default api;

2.2 使用 React Context 管理 Token 状态

通过 React Context 管理 Token 的状态,方便在组件中共享和更新。

import React, { createContext, useContext, useState, useEffect } from 'react';interface AuthContextType {accessToken: string | null;refreshToken: string | null;setTokens: (accessToken: string, refreshToken: string) => void;clearTokens: () => void;
}const AuthContext = createContext<AuthContextType | undefined>(undefined);export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {const [accessToken, setAccessToken] = useState<string | null>(localStorage.getItem('accessToken'));const [refreshToken, setRefreshToken] = useState<string | null>(localStorage.getItem('refreshToken'));const setTokens = (accessToken: string, refreshToken: string) => {localStorage.setItem('accessToken', accessToken);localStorage.setItem('refreshToken', refreshToken);setAccessToken(accessToken);setRefreshToken(refreshToken);};const clearTokens = () => {localStorage.removeItem('accessToken');localStorage.removeItem('refreshToken');setAccessToken(null);setRefreshToken(null);};return (<AuthContext.Provider value={{ accessToken, refreshToken, setTokens, clearTokens }}>{children}</AuthContext.Provider>);
};export const useAuth = () => {const context = useContext(AuthContext);if (!context) {throw new Error('useAuth must be used within an AuthProvider');}return context;
};

2.3 在组件中使用

在需要身份验证的组件中,使用 useAuth Hook 获取和更新 Token。

import React from 'react';
import { useAuth } from './AuthContext';
import api from './api';const ProtectedComponent: React.FC = () => {const { accessToken, setTokens, clearTokens } = useAuth();const fetchData = async () => {try {const response = await api.get('/protected-resource');console.log(response.data);} catch (error) {console.error('Failed to fetch data', error);}};return (<div><button onClick={fetchData}>Fetch Data</button><button onClick={clearTokens}>Logout</button></div>);
};export default ProtectedComponent;

3. 后端实现(Node.js + Express)

3.1 登录接口

登录成功后返回 Access TokenRefresh Token

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();app.use(express.json());const SECRET_KEY = 'your-secret-key';
const REFRESH_SECRET_KEY = 'your-refresh-secret-key';app.post('/login', (req, res) => {const { username, password } = req.body;// 模拟用户验证if (username === 'admin' && password === 'password') {const accessToken = jwt.sign({ username }, SECRET_KEY, { expiresIn: '15m' });const refreshToken = jwt.sign({ username }, REFRESH_SECRET_KEY, { expiresIn: '7d' });res.json({ accessToken, refreshToken });} else {res.status(401).json({ message: 'Invalid credentials' });}
});

3.2 刷新 Token 接口

验证 Refresh Token 并返回新的 Access Token

app.post('/refresh-token', (req, res) => {const { refreshToken } = req.body;if (!refreshToken) {return res.status(401).json({ message: 'Refresh token is required' });}try {const decoded = jwt.verify(refreshToken, REFRESH_SECRET_KEY);const accessToken = jwt.sign({ username: decoded.username }, SECRET_KEY, { expiresIn: '15m' });res.json({ accessToken });} catch (error) {res.status(401).json({ message: 'Invalid refresh token' });}
});

4. 总结

4.1 核心优势

  • 无感刷新:用户无需手动登录即可获取新的 Access Token。
  • 安全性:Access Token 有效期短,Refresh Token 有效期长但仅用于刷新 Access Token。
  • 用户体验:减少用户因 Token 过期而需要频繁登录的情况。

4.2 注意事项

  • 并发请求:当多个请求同时触发 Token 刷新时,需要确保只有一个刷新请求被发送。
  • 安全性:Refresh Token 应存储在安全的地方(如 HttpOnly Cookie)。
  • 错误处理:在 Token 刷新失败时,应清除本地存储并跳转到登录页面。

通过以上实现,双 Token 无感刷新机制可以在前后端分离的项目中有效提升用户体验和安全性。


http://www.ppmy.cn/server/176039.html

相关文章

ElementUI 表格中插入图片缩略图,鼠标悬停显示大图

如何在 ElementUI 的表格组件 Table 中插入图片缩略图&#xff0c;通过鼠标悬停显示大图&#xff1f;介绍以下2种方式&#xff1a; 方法1&#xff1a;直接在模板元素中插入 <template><el-table :data"tableData"><el-table-column label"图片…

conda创建Python虚拟环境的原理

<Conda>在创建Python虚拟环境时&#xff0c;其背后的原理涉及到Conda包的版本管理和隔离。Conda是一个开源的包管理器和环境管理系统&#xff0c;它主要用于安装、运行和部署各种Python、R、Ruby、Node.js等语言的包、依赖和库。以下是创建Python虚拟环境的原理&#xff…

使用 Docker 部署前端项目全攻略

文章目录 1. Docker 基础概念1.1 核心组件1.2 Docker 工作流程 2. 环境准备2.1 安装 Docker2.2 验证安装 3. 项目配置3.1 项目结构3.2 创建 Dockerfile 4. 构建与运行4.1 构建镜像4.2 运行容器4.3 访问应用 5. 使用 Docker Compose5.1 创建 docker-compose.yml5.2 启动服务5.3 …

电脑如何录屏

以下是电脑录屏的常用方法总结&#xff0c;涵盖系统自带工具、第三方软件及进阶功能&#xff0c;结合不同场景需求推荐最佳方案&#xff1a; 一、系统自带工具 Xbox Game Bar&#xff08;Windows 10/11&#xff09; 操作步骤&#xff1a;按 WinG 打开游戏栏 → 点击录制按钮&am…

JVM调优关注的核心指标?

博主介绍&#xff1a;✌全网粉丝5W&#xff0c;全栈开发工程师&#xff0c;从事多年软件开发&#xff0c;在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战&#xff0c;博主也曾写过优秀论文&#xff0c;查重率极低&#xff0c;在这方面有丰富的经验…

RabbitMQ 基本原理详解

1. 引言 在现代分布式系统中&#xff0c;消息队列&#xff08;Message Queue&#xff09;是实现异步通信、解耦系统组件、提高系统可靠性和扩展性的重要工具。RabbitMQ 作为一款开源的消息中间件&#xff0c;因其高性能、易用性和丰富的功能&#xff0c;被广泛应用于各种场景。…

Android PC 要来了?Android 16 Beta3 出现 Enable desktop experience features 选项

在之前的 《Android 桌面窗口新功能推进》 我们就聊过&#xff0c;Google 就一直在努力改进 Android 的内置桌面模式&#xff0c;例如添加了适当的窗口标题、捕捉窗口的能力、悬停选项、窗口大小调整、最小化支持、app-to-web 等。 比如在搭载 Android 15 QPR 1 Beta 2 的 Pix…

kafka生成者发送消息失败报错:RecordTooLargeException

kafka生成者发送消息典型案例 生产者 发送消息失败&#xff1a;Failed to send; nested exception is org.apache.kafka.common.errors.RecordTooLargeException: The message is 1053512 bytes when serialized which is larger than the maximum request size you have confi…