前端实现token的无感刷新#记录

因为服务器的token一版不会设置太长,token过期后就需要重新登录,频繁的登录会造成体验不好的问题,因此,需要体验好的话,就需要定时去刷新token,并替换之前的token。以下是token失效的效果:

那么做到token的无感刷新,主要有3种方案:

方案一:

后端返回过期时间,前端每次请求就判断token的过期时间,快到过期时间,就去调用刷新token接口。

缺点:若本地时间被篡改,特别是本地时间比服务器时间慢时,拦截会失败,不建议采用。

方案二:

后端返回过期时间,前端写个定时器,然后定时刷新token接口。

缺点:浪费资源,消耗性能,不建议采用。

方案三: 

在请求响应拦截器中拦截,判断token 返回过期后,调用刷新token接口,推荐使用。

那么以下是方案三的实现步骤:

1、首次登录的时候会获取到两个token,把获取到的两个token存到前端缓存中。

localStorage.setItem('refreshToken',xxx) 
localStorage.setItem('token', xxx)

2、token刷新基础写法

import axios from "axios"let flag = false // 设置开关,防止多次请求
let expiredList = [] //存储过期的请求// 把过期请求添加在数组中
function addExpiredRequest(request) {expiredList.push(request)
}// 创建axios实例
const service = axios.create({baseURL: 'http://xxxxxxxxx', //后台请求接口路径timeout: 10000  // 请求超时时间
})service.interceptors.request.use(config => {localStorage.getItem('token') && (config.headers.Authorization = localStorage.getItem('token'))config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/json;charset=utf-8'return config},error => {Promise.reject(error)}
)service.interceptors.response.use(res => {const code = res.data.codeif (code === 70001 || code === 401) { //与后端约定相应的code以此判断是否过期// 把过期请求存储起来,用于请求到新的刷新tokenaddRequest(() => resolve(http(config)))// 用刷新token去请求新的主tokenif (!flag) {flag = true;// 获取刷新tokenlet refreshToken = localStorage.getItem('refreshToken');if (refreshToken) {// 判断刷新token是否过期,  getRefreshToken这个是你封装的请求刷新token的接口getRefreshToken(refreshToken).then(res => {if (判断刷新token失效,退出登录) {flag = false// 移除刷新tokenlocalStorage.removeItem('refreshToken')localStorage.removeItem('token')location.href = '/' //跳转到你指定的页面} else if (res.code === 1000) {flag = false// 重新发送请求expiredList.forEach((request) => request())expiredList = [] }})}}}else if(code === 200){return res.data}
},error => {return Promise.reject(error)}
)export default service

3、token刷新进阶写法(包含防止多次刷新token、同时发起两个或者两个以上的请求时刷新token)

import axios from 'axios'// 是否正在刷新的标记
let isRefreshing = false//存储过期的请求
let expiredList = [] // 创建axios实例
const service = axios.create({baseURL: 'http://xxxxxxxxx', //后台请求接口路径timeout: 10000  // 请求超时时间
})service.interceptors.request.use(config => {localStorage.getItem('token') && (config.headers.Authorization = localStorage.getItem('token'))config.headers['Content-Type'] = config.headers['Content-Type'] || 'application/json;charset=utf-8'return config},error => {Promise.reject(error)}
)service.interceptors.response.use(res => {//约定code 401 token 过期if (res.data.code === 401) {if (!isRefreshing) {isRefreshing = true//调用刷新token的接口return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: localStorage.getItem('token') }).then(res => {const { token } = res.data// 替换tokenlocalStorage.setItem('token', token)res.headers.Authorization = `${token}`// token 刷新后将数组的方法重新执行expiredList.forEach((cb) => cb(token))expiredList = [] // 重新请求完清空return service(res.config)}).catch(err => {localStorage.removeItem('refreshToken')localStorage.removeItem('token')location.href = '/' //跳转到你指定的页面return Promise.reject(err)}).finally(() => {isRefreshing = false})} else {// 返回未执行 resolve 的 Promisereturn new Promise(resolve => {// 用函数形式将 resolve 存入,等待刷新后再执行expiredList.push(token => {res.headers.Authorization = `${token}`resolve(service(res.config))})})}}return res && res.data},(error) => {return Promise.reject(error)}
)

4、上述写法是方便在此文章中理解无感刷新token的代码,其中储存token到本地缓存中的代码可以提取出来,然后在使用到的地方导入使用即可。

例子:把需要的方法提取出来export function getRefreshTokenn() {return localStorage.getItem(refreshToken)
}export function setRefreshToken(token) {return localStorage.setItem('refreshToken',token)
}export function removeRefreshToken() {return localStorage.removeItem('refreshToken')
}使用方法:
import { getRefreshTokenn, setRefreshToken, removeRefreshToken } from '@/utils/auth'把 localStorage.removeItem('refreshToken') 这段代码替换成 removeRefreshToken()

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

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

相关文章

Vue3组件基础示例

组件是vue中最推崇的,也是最强大的功能之一,就是为了提高重用性,减少重复性的开发。 如何使用原生HTML方法实现组件化 在使用原生HTML开发时,我们也会遇到一些常见的功能、模块,那么如何在原生HTML中使用组件化呢&am…

动态规划——线性dp

图片来源&#xff1a;_snowstorm_ 路线问题的状态表示一般都可以用点的坐标来表示 状态表示数组维数的确定原则&#xff1a;在可以用该维数表示出答案的基础上维数尽可能最小 数字三角形 acwing 898 #include<iostream> #include<cstring> #include<algorith…

python学习笔记——控制流

目录 1. 控制流**** 1.1. if-elif-else语句**** 1.2. 循环结构**** 1.2.1. for循环**** 1.2.2. While循环**** 1.2.3. 嵌套循环**** 1.2.4. 循环的控制**** 1.2.4.1. Break**** 1.2.4.2. Continue**** 1.2.5. 遍历**** 1.2.5.1. dict**** 1.2.5.1.1. 遍历key&#x…

三分钟带你了解,可重构柔性装配生产线

产品个性化时代&#xff0c;产品小批量、多批次&#xff0c;行业常用高柔性的人-机混合装配线实现跨品类产品装配&#xff0c;但产品的装配质量一致性差、效率低成为行业痛点。富唯智能联合清华大学提出了可重构柔性装配方法和技术&#xff0c;实现跨品类产品的数控自动化装配。…

京东云轻量云主机8核16G配置租用价格1198元1年、4688元三年

京东云轻量云主机8核16G服务器租用优惠价格1198元1年、4688元三年&#xff0c;配置为8C16G-270G SSD系统盘-5M带宽-500G月流量&#xff0c;华北-北京地域。京东云8核16G服务器活动页面 yunfuwuqiba.com/go/jd 活动链接打开如下图&#xff1a; 京东云8核16G服务器优惠价格 京东云…

原型变量、原子操作、原子性、内存序

一、原子变量、原子操作 锁竞争&#xff1a;互斥锁、条件变量、原子变量、信号量、读写锁、自旋锁。在高性能基础组件优化的时候&#xff0c;为了进一步提高并发性能&#xff0c;可以使用原子变量。性能&#xff1a;原子变量 > 自旋锁 > 互斥锁。 操作临界资源的时间较长…

7 个 iMessage 恢复应用程序/软件可轻松恢复文本

由于误操作、iOS 升级中断、越狱失败、设备损坏等原因&#xff0c;您可能会丢失 iPhone/iPad 上的 iMessages。意外删除很大程度上增加了这种可能性。更糟糕的是&#xff0c;这种情况经常发生在 iDevice 缺乏备份的情况下。 &#xff08;iPhone消息消失还占用空间&#xff1f;&…

如何利用HubSpot 出海CRM实现精准海外客户定位与拓展?

在当今全球化的商业环境中&#xff0c;企业寻求海外市场的拓展已成为增长的重要策略。然而&#xff0c;海外市场的复杂性和多样性为企业带来了巨大的挑战。为了有效地定位和拓展海外客户&#xff0c;许多企业选择了HubSpot 出海CRM作为他们的营销和销售管理工具。今天运营坛将带…

Web题记

反序列化补充知识&#xff1a; private变量会被序列化为&#xff1a;\x00类名\x00变量名 protected变量会被序列化为: \x00\*\x00变量名 public变量会被序列化为&#xff1a;变量名web254 这个逻辑不难&#xff0c;自己刚看的时候还奇怪是不是自己哪里想错了&#xff0c;因为…

java云his系统源码 B/S版+saas智慧医院云his系统源码 二甲医院应用多年 运行稳定

java云his系统源码 B/S版saas智慧医院云his系统源码 二甲医院应用多年 运行稳定 医院云HIS系统简介&#xff1a; SaaS模式Java版云HIS系统&#xff0c;在公立二甲医院应用三年&#xff0c;经过多年持续优化和打磨&#xff0c;系统运行稳定、功能齐全&#xff0c;界面布局合理…

mac电脑安装redis教程

1、下载地址 Download | RedisRedisYou can download the last Redis source files here. For additional options, see the Redis downloads section below.Stable (7.2)Redis 7.2 …https://redis.io/download/#redis-downloads 2、安装 2.1 解压下载后的压缩文件 2.2 进入…

【C++】类和对象(中篇)

目录 1、类中的6个默认成员函数 2、构造函数 2.1 概念 2.2 特性 3、析构函数 3.1 概念 3.2 特性 4、拷贝构造函数 4.1 概念 4.2 特征 5、赋值运算符重载 5.1 运算符重载 5.1.1 全局的operator ​编辑 5.1.2 成员函数的operator 5.2 赋值运算符重载 6、创建Date类…

ffmpeg 将多个视频片段合成一个视频

ffmpeg 将多个视频片段合成一个视频 References 网络视频 6 分钟的诅咒。 新建文本文件 filelist.txt filelist.txtfile output_train_video_0.mp4 file output_train_video_1.mp4 file output_train_video_2.mp4 file output_train_video_3.mp4 file output_train_video_4.m…

android 资源文件混淆

AGP7.0以上引用AndResGuard有坑 记录下 在项目的build.gradle中添加如下 buildscript {ext.kotlin_version "1.4.31"repositories {google()jcenter()maven {url "https://s01.oss.sonatype.org/content/repositories/snapshots/"}}dependencies {class…

2023护网行动经验分享(2024护网招人)

今年的护网又开始摇人了&#xff0c;不知道大家有想法没&#xff1f; 去年的护网结束之后&#xff0c;朋友圈感觉是在过年&#xff0c;到处是倒计时和庆祝声。 看得出来防守方们7*24小时的看监控还是比较无奈的。 本次复盘基于我对整个护网行动的观察总结而来&#xff0c;仅…

C语言分支语句

一、什么是语句 C语句可分为以下五类&#xff1a; 表达式语句 函数调用语句 控制语句 复合语句 空语句 本周后面介绍的是控制语句。 控制语句用于控制程序的执行流程&#xff0c;以实现程序的各种结构方式&#xff0c;它们由特定的语句定义符组成&#xff0c;C语 言有…

建筑节能遮阳物件类网站织梦模板 节能建筑类网站源码下载(带手机版数据同步)

内容目录 一、详细介绍二、效果展示1.部分代码2.效果图展示 三、学习资料下载 一、详细介绍 模板名称&#xff1a;(带手机版数据同步)建筑节能遮阳物件类网站织梦模板 节能建筑类网站源码下载 本套织梦模板采用织梦最新内核开发的模板&#xff0c;这款模板使用范围广&#xf…

RUST Rover 条件编译 异常处理

按官方处理发现异常 会报异常 error: failed to parse manifest at C:\Users\topma\RustroverProjects\untitled2\Cargo.toml 修改模式如下才能正常编译 网上说明 这样处理 https://course.rs/cargo/reference/features/intro.html RUST 圣经里描述 [features] print-a []…

JQuery(二)---【使用JQuery对HTML、CSS进行操作】

零.前言 JQuery(一)---【JQuery简介、安装、初步使用、各种事件】-CSDN博客 一.使用JQuery对HTML操作 1.1获取元素内容、属性 使用JQ可以操作元素的“内容” text()&#xff1a;设置或返回元素的文本内容html()&#xff1a;设置或返回元素的内容(包括HTML标记)val()&#…

Win UI3开发笔记(九)关于图标Win10乱码问题

1、最开始的问题&#xff0c;winui3 gallery软件的左侧全是乱码&#xff0c;使用icon的时候&#xff0c;设置name属性出现的全是乱码&#xff0c;所以开发涉及到这部分使用Text.Glyph属性。 2、后来出现的问题&#xff0c;靠 textbox右键有各种操作&#xff0c;前面的图标乱码…