如何实现无感刷新(附前后端实现)？

无感刷新的核心思路：

在这里插入图片描述

无感刷新机制的目的是在用户不知情的情况下，自动更新其认证令牌（通常是Access Token），以保证用户的会话不会中断。这通常涉及到两种类型的令牌：

  1. Access Token：它是用户进行认证后得到的令牌，允许用户访问服务器的受保护资源。它有一个较短的有效期。

  2. Refresh Token：它是在同一时间发放给用户的另一个令牌，用于在Access Token过期时获取一个新的Access Token。它的有效期比Access Token长。

当Access Token即将过期或已经过期时，客户端会使用Refresh Token向认证服务器请求一个新的Access Token。如果Refresh Token仍然有效，认证服务器则发放一个新的Access Token给客户端，并且可能会同时发放一个新的Refresh Token。这个过程对用户来说是没有感知的，因此被称为“无感”刷新。

在项目中实施无感刷新：

后端实施步骤：

  1. 认证端点设置：

    • 设计一个认证API端点，当用户初次登录时，返回Access Token和Refresh Token。
    • 设计一个Token刷新API端点，只接受Refresh Token并返回新的Access Token（可选地返回新的Refresh Token）。

  2. Token管理：

    • Access Token应有一个短暂的生命周期，例如15分钟。
    • Refresh Token应有一个长期的生命周期，例如7天或更长，且应该存储在一个安全的存储中。

  3. 安全考虑：

    • 对Refresh Token进行旋转（每次使用后就废弃旧的Refresh Token并发放一个新的）。
    • 通过HTTPS交换所有Token。
    • 应用适当的加密措施来保护Token的安全。
前端实施步骤：

  1. 存储Token：

    • 在客户端安全地存储Access Token和Refresh Token（例如使用Web的localStorage或SecureStorage）。

  2. 拦截请求和响应：

    • 使用拦截器监视所有出站请求和进站响应。
    • 在请求头中自动加入Access Token。

  3. 处理过期的Access Token：

    • 当接收到表示Token过期的HTTP状态码（例如401）时，暂停发出的请求。
    • 使用Refresh Token请求新的Access Token。

  4. 处理新的Access Token：

    • 更新存储中的Access Token。
    • 重新发送之前因Token过期而暂停的请求。

  5. 处理Refresh Token过期：

    • 如果Refresh Token也过期或无效，引导用户重新登录。
无感刷新机制的大概思路就是这些，下面是具体的示例，分为简化版和完整版，简化版目的是更好的了解无感刷新的原理，而完整版就要考虑一些其他问题，比如说安全问题。

下面是实现无感刷新机制的具体示例（简化版）

这个例子涵盖前端（使用JavaScript）和后端（Node.js环境下使用Express框架）

后端（Node.js/Express）

const express = require('express');
const jwt = require('jsonwebtoken');
const app = express();
const accessTokenSecret = 'YOUR_ACCESS_TOKEN_SECRET';
const refreshTokenSecret = 'YOUR_REFRESH_TOKEN_SECRET';
let refreshTokens = [];app.post('/login', (req, res) => {// 用户登录逻辑，验证用户凭证const { username, password } = req.body;// 这里应该有逻辑来验证用户凭证// 如果验证成功：const accessToken = jwt.sign({ username }, accessTokenSecret, { expiresIn: '15m' });const refreshToken = jwt.sign({ username }, refreshTokenSecret);refreshTokens.push(refreshToken);res.json({accessToken,refreshToken});
});app.post('/refresh', (req, res) => {// 用户发送refresh token来获取新的access tokenconst { refreshToken } = req.body;if (!refreshToken || !refreshTokens.includes(refreshToken)) {return res.sendStatus(403);}jwt.verify(refreshToken, refreshTokenSecret, (err, user) => {if (err) {return res.sendStatus(403);}const newAccessToken = jwt.sign({ username: user.username }, accessTokenSecret, { expiresIn: '15m' });res.json({accessToken: newAccessToken});});
});app.listen(3000, () => {console.log('Authentication service started on port 3000');
});

前端（JavaScript/AJAX）

假设使用了axios作为HTTP客户端，可以设置拦截器来自动处理Token刷新。

axios.interceptors.response.use(response => {return response;
}, error => {const originalRequest = error.config;if (error.response.status === 401 && !originalRequest._retry) {originalRequest._retry = true;return axios.post('/refresh', {refreshToken: localStorage.getItem('refreshToken')}).then(res => {if (res.status === 200) {localStorage.setItem('accessToken', res.data.accessToken);axios.defaults.headers.common['Authorization'] = 'Bearer ' + localStorage.getItem('accessToken');return axios(originalRequest);}});}return Promise.reject(error);
});

这段代码中，我们在响应拦截器中检查任何错误的响应。如果我们得到一个401响应，并且这是第一次重试，我们就发送一个带有refreshToken的请求到/refresh端点。如果刷新Token成功，我们就保存新的accessToken，更新请求头，并重新发起失败的请求。

完整示例

实现非简化的登录无感刷新机制通常会涉及更详细的认证流程、错误处理、日志记录和安全性措施。这包括使用数据库存储Refresh Tokens、自动撤销机制、双因素认证等。

后端实现（Node.js/Express + MongoDB）

首先，你需要设置一个数据库来存储Refresh Tokens。出于安全考虑，每个Refresh Token都应该与一个用户账户关联，并且能够被追踪和撤销。

const express = require('express');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcrypt');
const User = require('./models/User'); // 导入User模型
const RefreshToken = require('./models/RefreshToken'); // 导入RefreshToken模型
const app = express();// ...其他必要的中间件和数据库连接代码...app.post('/login', async (req, res) => {// 用户登录逻辑，验证用户凭证const { username, password } = req.body;const user = await User.findOne({ username });if (user && bcrypt.compareSync(password, user.password)) {const accessToken = jwt.sign({ userId: user._id }, accessTokenSecret, { expiresIn: '15m' });const refreshToken = jwt.sign({ userId: user._id }, refreshTokenSecret);// 保存refresh token到数据库const newRefreshToken = new RefreshToken({ token: refreshToken, user: user._id });await newRefreshToken.save();res.json({ accessToken, refreshToken });} else {res.status(401).send('Username or password incorrect');}
});app.post('/refresh', async (req, res) => {// 用户发送refresh token来获取新的access tokenconst { refreshToken } = req.body;const dbToken = await RefreshToken.findOne({ token: refreshToken });if (!dbToken) {return res.status(403).send('Refresh token not found');}jwt.verify(refreshToken, refreshTokenSecret, async (err, decoded) => {if (err) {return res.status(403).send('Refresh token invalid');}// 生成新的access token和refresh tokenconst newAccessToken = jwt.sign({ userId: decoded.userId }, accessTokenSecret, { expiresIn: '15m' });const newRefreshToken = jwt.sign({ userId: decoded.userId }, refreshTokenSecret);// 更新数据库中的refresh tokendbToken.token = newRefreshToken;await dbToken.save();res.json({ accessToken: newAccessToken, refreshToken: newRefreshToken });});
});app.listen(3000, () => {console.log('Authentication service started on port 3000');
});

在此示例中，我们使用了MongoDB来存储用户和他们的Refresh Tokens。登录时，我们验证用户凭证，并且如果认证成功，我们就生成Access Token和Refresh Token，然后将Refresh Token保存到数据库。在无感刷新流程中，我们验证提供的Refresh Token是否存在于数据库中，并且是否有效，然后发放新的Access Token。

前端实现（JavaScript/AJAX + Local Storage）

在前端实现中，我们需要确保存储Token的方法是安全的。在生产环境中，你可能需要考虑使用更安全的存储方式，如HTTPOnly Cookies或Secure Local Storage。

axios.interceptors.response.use(response => response,error => {const originalRequest = error.config;// 检测token过期的错误代码，比如401if (error.response.status === 401 && originalRequest.url === '/refresh') {// 刷新Token失败，直接登出用户logoutUser();return Promise.reject(error);}if (error.response.status === 401 && !originalRequest._retry) {originalRequest._retry = true;return axios.post('/refresh', { refreshToken: localStorage.getItem('refreshToken') }).then(res => {if (res.status === 200) {// 将新token设置到本地存储和axios默认头部localStorage.setItem('accessToken', res.data.accessToken);localStorage.setItem('refreshToken', res.data.refreshToken);axios.defaults.headers.common['Authorization'] = 'Bearer ' + res.data.accessToken;// 更新失败请求的头部并重新发送originalRequest.headers['Authorization'] = 'Bearer ' + res.data.accessToken;return axios(originalRequest);}}).catch(error => {// 任何错误都直接登出用户logoutUser();return Promise.reject(error);});}return Promise.reject(error);}
);function logoutUser() {// 清除本地存储和状态，重定向到登录页面localStorage.removeItem('accessToken');localStorage.removeItem('refreshToken');// ...重定向到登录页的代码...
}

在前端的实现中，我们创建了一个axios拦截器，它会在遇到401未授权的响应时自动尝试刷新Token。如果刷新Token请求也失败，则触发用户登出的逻辑。

注意：此功能一定要注意其安全性，具体的话要结合实际的项目，以下是我的一些建议：
安全方面通常包括以下几个方法：

1. 使用HTTPS来加密所有的通信。
2. 安全地存储Access Token和Refresh Token，如使用httpOnly和Secure属性的Cookies。
3. 对Token进行定期轮换，特别是Refresh Token。
4. 在服务器端验证Token的签名。
5. 设置适当的Token过期时间。
6. 实现Token撤销逻辑，以便在检测到异常时能够立即废弃使用。
7. 避免在客户端暴露敏感的认证逻辑。
8. 对所有的认证请求和Token刷新请求进行率限制和异常监测。
9. 使用跨站请求伪造（CSRF）保护措施。
10. 确保客户端和服务端都有充分的错误处理和日志记录机制。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/610364.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Python(3)：条件语句+循环语句+逻辑运算符+符号优先级

Python(3)：条件语句+循环语句+逻辑运算符+符号优先级

文章目录 一、if语句1.if语句2.if 和 elif区别3.三元表达式 二、循环语句1.range函数和循环结束关键字2.while循环3.for循环 三、逻辑运算符1.and语句2.or语句3.not语句4.逻辑运算法的优先级 四、python运算符优先级和结合性一览表 一、if语句 1.if语句 1.if单分支语句 格式…
阅读更多...
分布式锁-redission可重入锁原理

分布式锁-redission可重入锁原理

5.3 分布式锁-redission可重入锁原理 在Lock锁中，他是借助于底层的一个voaltile的一个state变量来记录重入的状态的，比如当前没有人持有这把锁，那么state0，假如有人持有这把锁，那么state1，如果持有这把锁的…
阅读更多...
常用Python爬虫库汇总

常用Python爬虫库汇总

很多人学Python，都是从爬虫开始的，毕竟网上类似的资源很丰富，开源项目也非常多。 Python学习网络爬虫主要分3个大的版块： 抓取 ， 分析 ， 存储 当我们在浏览器中输入一个url后回车，后台会发生什…
阅读更多...
跟着Carl大佬学leetcode之27 移除元素

跟着Carl大佬学leetcode之27 移除元素

来点强调，刷题是按照代码随想录的顺序进行的，链接如下https://www.programmercarl.com/本系列是记录一些刷题心得和学习过程，就看到题目自己先上手试试，然后看程序员Carl大佬的解释，自己再敲一遍修修补补，练…
阅读更多...
Linux网络名称空间和虚拟机有何区别

Linux网络名称空间和虚拟机有何区别

在Linux系统中，网络名称空间和虚拟机都是实现资源隔离和虚拟化的技术，但它们在设计理念、实现机制、资源消耗、使用场景等方面存在着显著的区别。本文旨在全方位、系统性地分析这两种技术的区别。🔍 1. 设计理念与实现机制 1.1. 网络名称空…
阅读更多...
中国软件商业模式

中国软件商业模式

很多IT技术人、风险投资人这些年进入SaaS产业，写了大量的文章来诊断中国软件产业。 我只是看过去十年的中国软件百强，这是事实上在中国这片土地上长出来并且跑出来的厂商。实践是检验一切真理的唯一标准。说美国怎么样怎么样，中国甲方企业和中…
阅读更多...
MMYOLO调试RTMDet--小数据集split_ss_dota_200

MMYOLO调试RTMDet--小数据集split_ss_dota_200

背景 用MMYOLO调试旋转目标检测时需要用到dota数据集，根据MMYOLO的官方教程，dota数据集经过处理后变为split_ss_dota，但是该数据集还是很大，对于一些配置比较低的机器要调试比较麻烦，所以这里针对该数据集&#xff0c…
阅读更多...
从0到1实现RPC | 09 故障隔离与恢复

从0到1实现RPC | 09 故障隔离与恢复

一、应用场景 故障隔离解决的是：当服务提供者provider出现异常时，消费者consumer就不再调用异常实例，而是选择好的实例，避免频繁出错。 故障恢复解决的是：一段时间过后，服务提供者provider可以正常提供服…
阅读更多...
Python+Selenium+Unittest 之Unittest5（常用装饰器-跳过用例执行）

Python+Selenium+Unittest 之Unittest5（常用装饰器-跳过用例执行）

目录 1、unittest.skip()（跳过该装饰器下的用例） 2、unittest.skipIf()（跳过该装饰器下判断条件为True的用例） 3、unittest.skipUnless()（跳过该装饰器下判断条件为False的用例） 4、unittest.expectedF…
阅读更多...
Thingsboard PE智慧运维仪表板实例（二）【智慧排口截污实例】

Thingsboard PE智慧运维仪表板实例（二）【智慧排口截污实例】

ThingsBoard 的仪表板是一个用于可视化和监控物联网数据的重要组件。 它具有以下特点： 1. 可定制性：用户可以根据自己的需求创建各种类型的图表、表格和指标。 2. 数据可视化：以直观的方式展示设备数据，帮助用户快速了解系统状态。 3. 实时更新：实时反映设备的最新数据…
阅读更多...
【RV1106的ISP使用记录之一】基础环境搭建

【RV1106的ISP使用记录之一】基础环境搭建

公司缺少ISP工程师，做为图像算法工程师的我这就不就给顶上来了么，也没给发两份工资，唉~ 先写个标题，占一个新坑，记录RK平台的传统ISP工作。 一、基础环境的硬件包括三部分： 1、相机环境，用于采…
阅读更多...
【示例】MySQL-4类SQL语言-DDL-DML-DQL-DCL

【示例】MySQL-4类SQL语言-DDL-DML-DQL-DCL

前言 本文主要讲述MySQL中4中SQL语言的使用及各自特点。 SQL语言总共分四类：DDL、DML、DQL、DCL。 SQL-DDL | Data Definition Language 数据定义语言：用来定义/更改数据库对象（数据库、表、字段） 用途 | 操作数据库 # 查询所…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023