前端实现token无感刷新的原因和步骤

前端实现无感刷新

需要这么做的原因

在使用过程中,如果token过期,再操作页面可能就需要重新返回登录页获取token了,在持续使用的过程中可能会出现多次跳去登录页的情况,用户体验很不好。所以需要做无感刷新

做token无感刷新的方式

使用双token:access_token(权限token)和refresh_token(用于获取新token的刷新token)
方式一:在响应器中拦截,判断access_token返回过期后,调用refresh_token的接口,获取新token,覆盖原access_token
方式二:后端返回access_token时间,让前端判断是否过期,如果过期则调用refresh_token的接口,刷新token
方式三:通过定时器,定时刷新access_token
通常是采用方式一去实现
弊端:方式二需要后端额外返回access_token过期时间字段,而且如果前端电脑本地时间被篡改,则无法正确判断access_token是否过期。方式三使用定时器会增加页面的开销影响性能

实现流程

1、登录后返回两个token,分别为权限access_token和refresh_token
2、在响应拦截器中对返回401(无权限状态码)时,通过refresh_token调用token刷新接口
3、替换本地已过期的access_token
4、把刚刚失败的请求(返回的错误对象)中的access_token替换掉
5、再次发送刚刚未能完成的请求。
注:如果refresh_token也过期了,那么则需要清除掉所有token(access_token和refresh_token),返回登录页登录。在刷新access_token的同时,最好也能刷新refresh_token,比如refresh_token设置过期为7天,刷新一次access_token后把refresh_token又往后续了7天。这也是为什么很多软件登录后几乎不用再登录的原因。
提示:在刷新access_token的时候,建议设置一个标识变量用于标识access_token是否已经刷新了,毕竟过期时发起的请求可能有多条,响应拦截后没必要重复刷新access_token,而且重复刷新acces_token可能会报错,因为最先执行完的刷新请求已经将refresh_token 更新了,而后面执行的刷新请求还是使用旧的refresh_token

避免重复刷新的示例

let isRefreshing = false;  // 是否刷新中
let promiseRe;
export function refreshToken() {if(isRefreshing) {  // 正在刷新中return promiseRe}isRefreshing = true;  // 第一个触发刷新的,将标识置truepromiseRe = request({  // 第一个刷新返回一个promise,后续有同时期提起刷新的,依旧直接对请求返回此promise,避免重复发起请求url: '/refreshToken',methods: 'post',data: { refreshToken: refresh_token}}).finally(() => {isFreshing = false;  // 请求执行完毕后,无论成功与否,都将标识置false,避免后续提起刷新时直接进if中,无法正常刷新token})return promiseRe
}

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

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

相关文章

windows下ffmpeg源码编译

参考:windows上使用vs2019和msys64编译 ffmpeg 4.3 | 码农家园 (codenong.com) 安装命令: pacman -S nasm pacman -S yasm pacman -S make pacman -S cmake pacman -S diffutils pacman -S pkg-config pacman -S git 1.编译 x264 将 x264放到home文件下…

mfc 设置excel 单元格的列宽

CString strTL, strBR;strTL.Format(L"%s%d", GetExcelColName(cd.nCol), cd.nRow);strBR strTL;CRange rangeMerge range.get_Range(_variant_t(strTL), _variant_t(strBR));rangeMerge.put_ColumnWidth(_variant_t((long)(20))); 宽度设置函数为 : pu…

CSS新手入门笔记整理:CSS背景样式

背景颜色:background-color 语法 background-color:颜色值; 颜色值有两种 一种是“关键字”,指的是颜色的英文名称,如red、green、blue等。参考CSS 颜色名称。另外一种是“十六进制RGB值”,类似“#FBE9D0”形式的值。参考十六…

HT78621 3.5A开关限流降压变换器基本参数信息

HT78621是一款高压降压开关稳压器,可向负载提供高达2A的连续电流。 HT78621 特性: ・宽输入电压: 5V – 60V ・峰值开关电流限值典型3.5A ・Z高1MHz开关频率 ・支持PWM调光控制输入,应用于LED ・集成G端MOSFET的短路保护 ・200μA静态电…

CentOS7 防火墙常用命令

以下是在 CentOS 7 上使用 firewall-cmd 命令管理防火墙时的一些常用命令: 检查防火墙状态: sudo firewall-cmd --state 启动防火墙: sudo systemctl start firewalld 停止防火墙: sudo systemctl stop firewalld 重启防火墙&…

启动 AWS Academy Learner Lab【教学】(Hadoop实验)

🔥博客主页: A_SHOWY🎥系列专栏:力扣刷题总结录 数据结构 云计算 第一部分 创建实例过程 首先,需要创建3台EC2,一台作主节点 (master node),两台作从节点 (slaves node)。 1.镜像选择 EC2&…

如何基于Akamai IoT边缘平台打造一个无服务器的位置分享应用

与地理位置有关的应用相信大家都很熟悉了,无论是IM软件里的位置共享或是电商、外卖应用中的配送地址匹配,我们几乎每天都在使用类似的功能与服务。不过你有没有想过,如何在自己开发的应用中嵌入类似的功能? 本文Akamai将为大家提…

梯度上升和随机梯度上升

目录 梯度上升算法: 代码: 随机梯度上升算法: 代码: 实验: 做图代码: 疑问: 1.梯度上升算法不适应大的数据集,改用随机梯度上升更合适。 2.改进过的随机梯度算法&#xff0…

Android Edittext进阶版(Textfieids)

一、Text fieids 允许用户在 UI 中输入文本,TextInputLayout TextInputEditText。 在 Text fieids 没出来(我不知道)前,想实现这个功能就需要自己自定义控件来实现这个功能。 几年前做个上面这种样式(filled 填充型)。需要多个控件组合 动画才能实现&a…

游戏开发增笑-扣扣死-Editor的脚本属性自定义定制-还写的挺详细的,旧版本反而更好

2012年在官方论坛注册的一个号,居然被禁言了,不知道官方现在是什么辣鸡,算了,大人不记狗子过 ”后来提交问题给CEO了,结果CEO百忙之中居然回复了,也是很低调的一个人,毕竟做技术的有什么坏心思呢…

基于SSM的老年公寓信息管理的设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

Clickhouse遇到密码错误如何修改密码

输入错误密码报错 rootDAILACHDBUD001:/var/log# clickhouse-client ClickHouse client version 23.4.2.11 (official build). Connecting to localhost:9000 as user default. Password for user (default): Connecting to localhost:9000 as user default. Code: 516. DB::E…

2023年JetBrains开发调查:Java 8仍广泛使用

开发者生态系统调查是查找和分析实际情况的好方法,而实际情况通常与看似流行或趋势的情况相反。 排名前三: Java8采用率:50%Java17采用率:45%Java11采用率:38% 看到这么多人仍在使用 Java 8(及更早版本&…

如何使用cpolar内网穿透工具实现公网SSH远程访问Deepin

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统,专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…

【C语言】深入理解指针(1)

目录 前言 (一)内存与地址 从实际生活出发 地址 内存 内存与地址关系密切 (二)指针变量 指针变量与取地址操作符 指针变量与解引用操作符 指针的大小 指针的运算 指针 - 整数 指针-指针 指针的关系运算 指针的类型的…

C++ 数组

目录 一维数组 一维数组的创建 一维数组的初始化 一维数组的使用 一维数组在内存中的存储 二维数组 二维数组的创建 二维数组的初始化 二维数组的使用 二维数组在内存中的存储 数组越界 一维数组 数组是一组形同类型的集合。 一维数组的创建 数组的创建方式&…

❀dialog命令运用于linux❀

目录 ❀dialog命令运用于linux❀ msgbox部件(消息框) yesno部件(yesno框) inputbox部件(输入文本框) textbox部件(文本框) menu部件(菜单框) fselect部…

哈希与哈希表

哈希表的概念 哈希表又名散列表,官话一点讲就是: 散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构。也就是说,它通过把关键码值映射到表中一个位置来访问记…

SpringBoot集成Redis

引入依赖 建议使用 Lettuce 连接驱动 <!--一&#xff1a;Jedis连接驱动缺点&#xff1a;Jedis基于TCP的阻塞性的连接方式1. 阻塞性IO2. 不能异步3. 线程不安全的Lettuce连接驱动优点&#xff1a;Lettuce基于Netty的多路复用的异步非阻塞的连接方式&#xff0c;1. 线程安全2…

公开Java框架开源到Maven中央仓库(避坑)

前言: gpg下载地址&#xff1a;http://www.gnupg.org/download 安装勾选 kleopatra 下载完成验证 gpg --version 当时为了开源Java框架&#xff0c;真的是绞尽脑汁&#xff0c;耗费很多精力查了很多资料&#xff0c;躺了很多坑&#xff0c;最终的结果无不是以发布失败而告终&am…