当前位置：首页 > 科技 > 软件

Token无感知刷新前端

来源：责编：时间：2024-07-11 17:33:58 628观看

导读思路Token无感知刷新是一种常见的技术，就是在用户无感知的情况下自动处理Token过期的问题，避免用户因Token过期而被迫重新登录。以下是实现Token无感知刷新的主要步骤和考虑因素：一、Token生成与存储Token生成：在用户登录

思路

Token无感知刷新是一种常见的技术，就是在用户无感知的情况下自动处理Token过期的问题，避免用户因Token过期而被迫重新登录。以下是实现Token无感知刷新的主要步骤和考虑因素：

一、Token生成与存储

Token生成：

在用户登录成功后，后端会生成两个Token：一个AccessToken（用于访问受保护的API，过期时间较短）和一个RefreshToken（用于获取新的AccessToken，过期时间较长）。
可以使用JWT（JSON Web Tokens）或其他安全机制来生成和验证Token。

Token存储：

将AccessToken和RefreshToken存储在客户端的本地缓存中，如localStorage或sessionStorage。
确保RefreshToken的安全性，避免在客户端以明文形式暴露。

二、请求拦截器设置

请求拦截器：

在发送请求之前，通过请求拦截器检查AccessToken是否存在并未过期。
如果AccessToken存在且未过期，则将其添加到请求的Authorization头部。
如果AccessToken不存在或已过期，则尝试使用RefreshToken获取新的AccessToken。

响应拦截器：

在接收到响应后，通过响应拦截器检查响应状态码。
如果状态码为401（未授权），则表明AccessToken已过期，此时应使用RefreshToken尝试获取新的AccessToken。
如果状态码为200（成功）或其他有效状态码，则直接处理响应数据。

三、Token刷新逻辑

检查Token是否过期：

可以在请求拦截器中检查AccessToken的过期时间，但这需要后端提供Token的过期时间字段，且存在本地时间被篡改的风险。
更推荐的做法是在响应拦截器中根据状态码（如401）来判断AccessToken是否过期。

使用RefreshToken获取新Token：

当检测到AccessToken过期时，使用RefreshToken向认证服务器发送请求以获取新的AccessToken和（可选的）新的RefreshToken。
将新获取的AccessToken保存到本地缓存，并替换掉旧的AccessToken。

重新发送请求：

使用新的AccessToken重新发送之前因Token过期而失败的请求。
这可能需要将失败的请求暂存起来，并在获取到新Token后依次重新发送。

四、防止多次刷新Token

设置一个标志位（如isRefreshing）来指示当前是否正在刷新Token。
如果在刷新Token的过程中又收到了需要刷新Token的请求，则可以直接使用已获取的（或正在获取的）新Token，而不是再次发起刷新Token的请求。

实现

前端实现Token无感知刷新的过程主要涉及到对HTTP请求的拦截、Token状态的判断、Token的刷新以及请求的重发等步骤。以下是一个详细的实现流程：

一、Token的获取与存储

用户登录：

用户输入用户名和密码进行登录。
登录成功后，后端服务器会生成一个AccessToken（短期Token）和一个RefreshToken（长期Token），并将它们返回给前端。

存储Token：

前端将AccessToken和RefreshToken存储在浏览器的本地缓存中，如localStorage或sessionStorage。由于localStorage具有持久性，更适合存储RefreshToken；而sessionStorage在页面会话结束时会被清除，适合存储AccessToken（但考虑到需要跨会话保持登录状态，通常也会选择localStorage）。

二、请求拦截器的设置

创建Axios实例：

使用Axios等HTTP客户端库创建一个Axios实例，并配置基础URL、请求超时时间等。

设置请求拦截器：

在发送请求之前，通过请求拦截器检查localStorage中是否存储了有效的AccessToken。
如果存在，则将AccessToken添加到请求的Authorization头部。

设置响应拦截器：

在接收到响应后，通过响应拦截器检查响应状态码。
如果状态码为401（未授权），则表明AccessToken已过期，此时需要尝试使用RefreshToken刷新Token。

三、Token刷新逻辑

检查Token是否过期：

响应拦截器中，根据状态码401判断AccessToken是否过期。注意，更准确的做法是在响应体中包含Token过期的具体信息，但这里以状态码为例。

使用RefreshToken获取新Token：

发起一个POST请求到认证服务器，将RefreshToken作为请求体或请求头发送给后端。
后端验证RefreshToken的有效性，并返回一个新的AccessToken（和可选的新的RefreshToken）。
前端接收到新的AccessToken后，将其保存到localStorage中，并替换掉旧的AccessToken。

重新发送请求：

使用新的AccessToken重新发送之前因Token过期而失败的请求。
这可以通过将失败的请求暂存起来，并在获取到新Token后依次重新发送来实现。

四、防止多次刷新Token

在刷新Token的过程中，设置一个标志位（如isRefreshing）来指示当前是否正在刷新Token。
如果在刷新Token的过程中又收到了需要刷新Token的请求，则可以直接使用已获取的（或正在获取的）新Token，而不是再次发起刷新Token的请求。

五、代码示例（简化版）

由于篇幅限制，这里只提供一个简化的代码示例框架：

import axios from 'axios';// 创建axios实例const service = axios.create({  baseURL: 'http://your-api-url', // API的base_url  timeout: 5000 // 请求超时时间});// 请求拦截器service.interceptors.request.use(  config => {    // 从localStorage获取token，并设置到请求头中    const token = localStorage.getItem('token');    if (token) {      config.headers['Authorization'] = `Bearer ${token}`;    }    return config;  },  error => {    // 处理请求错误    console.error('请求错误:', error); // for debug    Promise.reject(error);  });// 响应拦截器service.interceptors.response.use(  response => {    // 对响应数据做点什么    return response.data;  },  error => {    // 处理响应错误    if (error.response && error.response.status === 401) {      // 尝试使用RefreshToken刷新Token      return refreshToken().then(newToken => {        // 设置新的Token并重新发送请求        localStorage.setItem('token', newToken);        // 这里需要实现请求重发的逻辑，可以通过修改Axios实例的配置或使用其他方式      }).catch(err => {        // 刷新Token失败，可能需要用户重新登录        console.error('刷新Token失败:', err);      });    }    return Promise.reject(error);  });// 刷新Token的函数（需要实现）function refreshToken() {  // 发送请求到认证服务器获取新的Token  // 返回Promise，解析为新的Token}

上述代码示例是一个简化的框架，实际实现时需要根据具体业务需求和后端API进行相应的调整和完善。特别是刷新Token的函数

本文链接：http://www.28at.com/showinfo-26-100468-0.htmlToken无感知刷新前端

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com

上一篇：既然有了HTTP，为什么还要HTTPS？

下一篇： VueConf，尤雨溪公布 Vue3.5 新特性以及无虚拟DOM版本

标签：

热门焦点

K60 Pro官方停产第三方瞬间涨价

虽然没有官方宣布，但Redmi的一些高管也已经透露了，Redmi K60 Pro已经停产且不会补货，这一切都是为了即将到来的K60 Ultra铺路，属于厂家的正常操作。但有意思的是该机在停产之后
小米平板5 Pro 12.4简评：多专多能兼顾影音娱乐的大屏利器

疫情带来了网课，网课盘活了安卓平板，安卓平板市场虽然中途停滞了几年，但好的一点就是停滞的这几年行业又有了新的发展方向，例如超窄边框、高刷新率、多摄镜头组合等，这就让安卓
7月安卓手机好评榜：三星S23Ultra好评率第一

性能榜和性价比榜之后，我们来看最后的安卓手机好评榜，数据来源安兔兔评测，收集时间2023年7月1日至7月31日，仅限国内市场。第一名：三星Galaxy S23 Ultra好评率：95.71%在即将迎来新
7月安卓手机性能榜：红魔8S Pro再夺榜首

7月份的手机市场风平浪静，除了红魔和努比亚带来了两款搭载骁龙8Gen2领先版处理器的新机之外，别的也想不到有什么新品了，这也正常，通常6月7月都是手机厂商修整的时间，进入8月份之
三言两语说透设计模式的艺术-简单工厂模式

一、写在前面工厂模式是最常见的一种创建型设计模式，通常说的工厂模式指的是工厂方法模式，是使用频率最高的工厂模式。简单工厂模式又称为静态工厂方法模式，不属于GoF 23种设计
量化指标是与非：挽救被量化指标扼杀的技术团队

作者 | 刘新翠整理 | 徐杰承本文整理自快狗打车技术总监刘新翠在WOT2023大会上的主题分享，更多精彩内容及现场PPT，请关注51CTO技术栈公众号，发消息【WOT2023PPT】即可直接领取
微信语音大揭秘：为什么禁止转发？

大家好，我是你们的小米。今天，我要和大家聊一个有趣的话题：为什么微信语音不可以转发？这是一个我们经常在日常使用中遇到的问题，也是一个让很多人好奇的问题。让我们一起来揭开这
.NET 程序的 GDI 句柄泄露的再反思

一、背景1. 讲故事上个月我写过一篇如何洞察 C# 程序的 GDI 句柄泄露文章，当时用的是 GDIView + WinDbg 把问题搞定，前者用来定位泄露资源，后者用来定位泄露代码，后面有朋友反
荣耀Magic4 至臻版首创智慧隐私通话强劲影音系统

2022年第一季度临近尾声，在该季度内，许多品牌陆续发布自己的最新产品，让大家从全新的角度来了解当今的手机技术。手机是电子设备中，更新迭代十分迅速的一款产品，基