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

Token无感知刷新前端

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

导读思路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版本

标签：

热门焦点

Find N3入网：最高支持16+1TB

OPPO将于近期登场的Find N3折叠屏目前已经正式入网，型号为PHN110。本次Find N3在外观方面相比前两代有很大的变化，不再是小号的横向折叠屏，而是跟别的厂商一样采用了较为常见的
7月安卓手机性价比榜：努比亚+红魔两款新机入榜

7月登场的新机有努比亚Z50S Pro和红魔8S Pro，除了三星之外目前唯二的两款搭载超频版骁龙8Gen2处理器的产品，而且努比亚和红魔也一贯有着不错的性价比，所以在本次的性价比榜单
分享六款相见恨晚的PPT模版网站, 祝你做出精美的PPT!

1、OfficePLUSOfficePLUS网站旨在为全球Office用户提供丰富的高品质原创PPT模板、实用文档、数据图表及个性化定制服务。优点：OfficePLUS是微软官方网站，囊括PPT模板、Word模
三万字盘点 Spring 九大核心基础功能

大家好，我是三友~~今天来跟大家聊一聊Spring的9大核心基础功能。话不多说，先上目录：图片友情提示，本文过长，建议收藏，嘿嘿嘿！一、资源管理资源管理是Spring的一个核心的基础功能，不
零售大模型“干中学”，攀爬数字化珠峰

文/侯煜编辑/cc来源/华尔街科技眼对于绝大多数登山爱好者而言，攀爬珠穆朗玛峰可谓终极目标。攀登珠峰的商业路线有两条，一是尼泊尔境内的南坡路线，一是中国境内的北坡路线。相
Temu起诉SHEIN，跨境电商战事升级

来源 | 伯虎财经（bohuFN）作者 | 陈平安日前据外媒报道，拼多多旗下跨境电商平台Temu正对竞争对手SHEIN提起新诉讼，诉状称Shein“利用市场支配力量强迫服装厂商与之签订独家
认真聊聊东方甄选：如何告别低垂的果实

来源：山核桃作者：财经无忌爆火一年后，俞敏洪和他的东方甄选依旧是颇受外界关心的“网红”。7月5日至9日，为期5天的东方甄选“甘肃行”首次在自有App内直播，
网传小米汽车开始筛选交付中心建筑面积不低于3000平方米

7月7日消息，近日有微博网友@长三角行健者爆料称，据经销商集团反馈，小米汽车目前已经开始了交付中心的筛选工作，要求候选场地至少有120个车位，建筑不能低
7月4日见！iQOO 11S官宣：“鸡血版”骁龙8 Gen2+200W快充加持

上半年已接近尾声，截至目前各大品牌旗下的顶级旗舰都已悉数亮相，而下半年即将推出的顶级旗舰已经成为了数码圈爆料的主流，其中就包括全新的iQOO 11S系