项目中前端如何实现无感刷新 token!

news2024/12/23 14:52:00

场景:线上平台有时会出现用户正在使用的时候,突然要用户去进行登录,这样会造成很不好的用户体验。 

1.请求采用的是axios

2.平台的采用的 JWT(JSON Web Tokens) 进行用户登录鉴权。

原因:

1.突然跳转到登录页面,是由于当前的 token 过期,导致请求失败;在 axios 的响应拦截axiosInstance.interceptors.response.use中处理失败请求返回的状态码 401,此时得知token失效,因此跳转到登录页面,让用户重新进行登录。

 

2.平台目前的逻辑是在 token 未过期内,用户登录平台可直接进入首页,无需进行登录操作;因此就存在该现象:用户打开平台,由于此时 token 未过期,用户直接进入到了首页,进行其他操作。但是在用户操作的过程中,token 突然失效了,此时就会出现突然跳转到登录页面,严重影响用户的体验感!

操作:

后台提供了两个参数accessToken(用于请求头中,进行鉴权,存在有效期)和refreshToken(刷新令牌,用于更新过期的 accessToken,相对于accessToken而言,他的时效期更长)

// 响应拦截
axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    let {
      data, config
    } = error.response;
    return new Promise((resolve, reject) => {
      /**
       * 判断当前请求失败
       * 是否由 toekn 失效导致的
       */
      if (data.statusCode === 401) {
         /**
         * refreshToken 为封装的有关更新 token 的相关操作 
         */
        refreshToken(() => {
          resolve(axiosInstance(config));
        });
      } else {
        reject(error.response);
      }
    })
  }
)
  • 我们通过判断statusCode来确定,是否当前请求失败是由token过期导致的;
  • 使用 Promise 处理将失败的请求,将由于 token 过期导致的失败请求存储起来(存储的是请求回调函数,resolve 状态)。理由:后续我们更新了 token 后,可以将存储的失败请求重新发起,以此来达到用户无感的体验

封装 refreshToken 逻辑

  1. 存储由于token过期导致的失败的请求。
  2. 更新本地以及axios中头部的token
  3. 当 refreshToken 刷新令牌也过期后,让用户重新登录。
// 存储由于 token 过期导致 失败的请求
let expiredRequestArr: any[] = [];

/**
 * 存储当前因为 token 失效导致发送失败的请求
 */
const saveErrorRequest = (expiredRequest: () => any) => {
  expiredRequestArr.push(expiredRequest);
}

// 避免频繁发送更新 
let firstRequre = true;
/**
 * 利用 refreshToken 更新当前使用的 token
 */
const updateTokenByRefreshToken = () => {
  firstRequre = false;
  axiosInstance.post(
    '更新 token 的请求',
  ).then(res => {
    let {
      refreshToken, accessToken
    } = res.data;
    // 更新本地的token
    localStorage.setItem('accessToken', accessToken);
    // 更新请求头中的 token
    setAxiosHeader(accessToken);
    localStorage.setItem('refreshToken', refreshToken);

    /**
     * 当获取了最新的 refreshToken, accessToken 后
     * 重新发起之前失败的请求
     */
    expiredRequestArr.forEach(request => {
      request();
    })
    expiredRequestArr = [];
  }).catch(err => {
    console.log('刷新 token 失败err', err);
    /**
     * 此时 refreshToken 也已经失效了
     * 返回登录页,让用户重新进行登录操作
     */
    window.location.href = `${HOME_PAGE}/login`;
  })
}

/**
 * 更新当前已过期的 token
 * @param expiredRequest 回调函数,返回由token过期导致失败的请求
 */
export const refreshToken = (expiredRequest: () => any) => {
  saveErrorRequest(expiredRequest);
  if (firstRequre) {
    updateTokenByRefreshToken();
  }
}

 

 

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

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

相关文章

【IVI】EVS 应用

EVS 应用 1、EVS启动2、EvsStateControl.cpp 控制管理2.1 EvsStateControl初始化2.2 EvsVehicleListener.h唤起处理EvsStateControl::updateLoop() 3、EVS 应用逻辑流程 android12-release 增强型视觉系统 (EVS) 1、EVS启动 Android 包含与 EVS 管理器和车载 HAL 通信的 EVS 应…

CAD2021安装教程适合新手小白【附安装包和手册】

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、下载文件二、使用步骤1.安装软件前,断开电脑网络(拔掉网线、关闭WIFI)2、鼠标右击【AutoCAD2021(64bit)】压缩包选择【解…

解密:GPT-4框架与训练过程,数据集组成,并行性的策略,专家权衡,推理权衡等细节内容

大家好,我是微学AI,今天给大家解密一下GPT-4框架与训练过程,数据集组成,并行性的策略,专家权衡,推理权衡等细节内容。2023年3月14日,OpenAI发布GPT-4,然而GPT-4的框架没有公开&#…

Nacos服务注册和配置中心(Config,Eureka,Bus)2

Nacos数据模型 Nacos领域模型,Namespace命名空间、Group分组、集群这些都是为了进行归类管理,把服务和配置文件进行归类,归类之后就可以实现一定的效果,比如隔离。对于服务来说,不同命名空间中的服务不能够互相访问调用 N…

msvcr110.dll丢失的解决方法分享,教你如何快速解决

首先介绍msvcr110.dll是什么?下面再介绍解决方法。 msvcr110.dll文件它提供了一系列用于C编程的函数和资源。这个文件通常用于支持使用了C语言编写的程序,如一些游戏、图形应用程序、数据库管理工具等。 与msvcp110.dll文件类似,msvcr110.dl…

Linux系统编程(守护进程)

文章目录 前言一、守护进程概念二、空洞文件三、创建守护进程总结 前言 本篇文章我们来讲解守护进程,守护进程在进程中是一个比较重要的概念,在笔试面试中也经常考到,这篇文章就带大家来学习一下什么是守护进程。 一、守护进程概念 守护进…

golang IDE 使用 go-1.7 无法识别 goroot问题

问题 当前使用了 golang IDE 要设定 go-1.17 版本作为默认 GOROOT 系统环境变量已经定义好 打开了 ide 会出现下面问题,选择 1.17 后会出现下面报错 error message The selected directory is not a valid horne for GO SDK 解决方法 修改 $GOROOT 下文件增加一个变…

动态表单实现原理

目录 动态表单是什么 动态表单的关键 前后端职责 数据库与表结构 功能实现与改进建议 动态表单是什么 静态表单是很常见,也是常规做法,其表单的结构是固定的,通常情况下一个表单对应数据库的一张表,表单中一个数据项对应数据表的一…

物业小程序制作:提升管理效率与服务质量

随着物业管理的日益复杂,物业小程序成为了提高管理效率和提供优质服务的重要工具。物业小程序旨在提供高效的物业管理服务。通过物业小程序,物业公司能够方便地与业主进行信息交流、报修处理等操作。 物业小程序的好处 提高管理效率:物业小程…

暑假第七天打卡

离散: 主析取范式和主合取范式的应用: (1)求公式成真与成假赋值: 化为主析取范式后,下标化为二进制就是成真赋值,不在下标里的就是成假赋值 化为主合取范式后,下标化为二进制就是…

2.Postgresql--array

CREATE TABLE city(country character varying(64),city character varying(64) );INSERT INTO city VALUES (中国,台北), (中国,香港), (中国,上海), (日本,东京), (日本,大阪);select country,string_agg(city,; order by city desc) from city group by countryselect coun…

React native 已有项目升级兼容web

基础 概念 | webpack 中文文档 | webpack 中文文档 | webpack 中文网 深入理解Webpack及Babel的使用 - 掘金 Introduction to React Native for Web // React Native for Web Webpack 是一个现代的 JavaScript 应用程序的静态模块打包工具,它将应用程序所依赖的各…

DynaSLAM2 2020论文翻译

DynaSLAM2:紧耦合的多目标追踪和SLAM 摘要 - 场景刚度的假设在视觉SLAM算法中很常见。但是,它限制了它们在人口稠密的现实环境中的适用性。此外,大多数智力包括自动驾驶,多机器人协作和增强/虚拟现实,都需要对周围环境进行明确的…

Low-Light Image Enhancement via Self-Reinforced Retinex Projection Model 论文阅读笔记

这是马龙博士2022年在TMM期刊发表的基于改进的retinex方法去做暗图增强(非深度学习)的一篇论文 文章用一张图展示了其动机,第一行是估计的亮度层,第二列是通常的retinex方法会对估计的亮度层进行RTV约束优化,从而产生…

Java正则校验:密码必须由字母和数字组成,且大于等于8个字符。

需求 对登录密码进行校验,需要密码必须由字母和数字组成(同时包括数字和数字),且大于等于8个字符。 原理 使用正则表达式校验字符串。 正则表达式构建思路: 字符为数字或字母;不能全是数字&#xff1b…

关于cip.cc查IP出口地址的工具到底准确不准确?

关于 cip.cc 或其他在线IP查询工具的准确性, 首先来看2张图片,分别如下 实际情况就是作者在杭州,使用的网络出口地址应该是百度的,而不是cip.cc所显示的地址。 所以结论是cip.cc并不靠谱,我又查阅了相关资料如下 1.…

Centos7部署nacos集群

一、GitHub下载Nacoc安装包 https://github.com/alibaba/nacos/releases 二、环境准备 1.服务器准备 2、JVAV环境安装 每台服务器都安装 JDK:yum install java-1.8.0-openjdk* -y三、软件安装 1、上传下载好的压缩包导服务目录(自定义/app&#xff…

Spring Scope

Spring中五种 Scope域 singleton,容器启动时创建(未设置延迟),容器关闭时销毁【单例】prototype,每次使用时创建,不会自动销毁,需要调用 DefaultListableBeanFactory.destroyBean(bean) 销毁【…

前端Web实战:从零打造一个类Visio的流程图拓扑图绘图工具

前言 大家好,本系列从Web前端实战的角度,给大家分享介绍如何从零打造一个自己专属的绘图工具,实现流程图、拓扑图、脑图等类Visio的绘图工具。 你将收获 免费好用、专属自己的绘图工具前端项目实战学习如何从0搭建一个前端项目等基础框架项…

小白到运维工程师自学之路 第五十三集 (rsync+inotify备份)

一、概述 Rsync是一个用于在不同计算机之间同步文件和文件夹的工具。它可以在本地计算机和远程服务器之间复制、更新和备份文件。rsync通过比较源和目标文件的差异来最小化传输的数据量,从而提供高效的文件同步功能。 Inotify是Linux内核提供的一种机制&#xff0…