面试题高频之token无感刷新(vue3+node.js)

无感刷新的基本原理

  1. 使用刷新令牌(refresh token):
    ○ 应用程序在首次登录成功后会获得一个访问令牌(access token)和一个刷新令牌(refresh token)。
    ○ 访问令牌通常有较短的有效期,而刷新令牌的有效期较长。
  2. 自动刷新:
    ○ 当访问令牌即将过期时,应用程序会在后台使用刷新令牌来获取新的访问令牌。
    ○ 这个过程通常是透明的,用户不会察觉到任何变化。

业务场景及双token的处理流程图

  1. 请求登录接口拿到两个token,在响应拦截器中存储在本地

service.interceptors.response.use(async function (response) {// 对响应数据做点什么if (response.data.code === 0) {response.data.data.token &&localStorage.setItem("token", response.data.data.token);response.data.data.refresh_token &&localStorage.setItem("refresh_token", response.data.data.refresh_token);return response.data.data;} return response;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);
  1. 提交业务表单时候,请求拦截器中请求头携带上短token


service.interceptors.request.use(function (config) {// 在发送请求之前做些什么// tokenif (config.url !== "/login") {config.headers["Authorization"] = `Bearer ${localStorage.getItem("token")}`;}return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);
const onSubmit =  ()=>{postFrom().then(res=>{if(res.content){ElMessage.success('提交成功')dialogVisible.value = false}else{//token失效,跳转登录页router.push('/login')}})
}
  1. 如果此时短token失效
  2. 通过请求getRefresh()接口获取新的token

在发起请求之前,需要在请求拦截器中设置携带长token

service.interceptors.request.use(function (config) {if (config.url === "/refresh_token") {config.headers["Authorization"] = `Bearer ${localStorage.getItem("refresh_token")}`;}return config;},
);
service.interceptors.response.use(async function (response) {// 对响应数据做点什么if (response.data.code === 0) {......} else if (response.data.code === 401) {console.log('token过期');// 请求刷新tokenconst result = await getRefresh();console.log(result);}return response;},
);
  1. 获取到新的token之后,设置请求头携带新token,再次发起提交表单
if (result.token) {console.log('getRefresh()携带长token去重新获取短token', result);//拿到新的token之后,设置或更新请求头中的 Authorization 字段。response.config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;// 再次发起提交表单的接口/protectedreturn service.request(response.config);}

此时已经实现,无感刷新token

  1. 假设长token也失效了,则跳转登录页重新获取 长短新token
let isRefreshing = false; //标记是否正在刷新token
// 添加响应拦截器
service.interceptors.response.use(async function (response) {// 对响应数据做点什么if (response.data.code === 0) {response.data.data.token &&localStorage.setItem("token", response.data.data.token);response.data.data.refresh_token &&localStorage.setItem("refresh_token", response.data.data.refresh_token);return response.data.data;} else if (response.data.code === 401) {if (!response.config._retry && !isRefreshing ) {console.log('token过期');isRefreshing = true;  // 标记为正在刷新tokenresponse.config._retry = true;// 请求刷新tokenconst result = await getRefresh();console.log(result);//之所以不需要再次设置新的短token,是因为getRefresh()接口的状态码是0,所以在上面已经设置过新tokenif (result.token) {console.log('getRefresh()携带长token去重新获取短token', result);//拿到新的token之后,设置或更新请求头中的 Authorization 字段。response.config.headers.Authorization = `Bearer ${localStorage.getItem("token")}`;isRefreshing = false;// 再次发起提交表单的接口/protectedreturn service.request(response.config);}} else if (isRefreshing) { // 已经在刷新,不再重复刷新console.log('长token也过期了,跳转登录页');isRefreshing = false;ElMessage.error('请重新登录');}}return response;},function (error) {// 对响应错误做点什么return Promise.reject(error);}
);

完整代码

青稞儿/双token无感刷新

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

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

相关文章

人工智能 | 基于ChatGPT开发人工智能服务平台

简介 ChatGPT 在刚问世的时候,其产品形态就是一个问答机器人。而基于ChatGPT的能力还可以对其做一些二次开发和拓展。比如模拟面试功能、或者智能机器人功能。 模拟面试功能包括个性化问题生成、实时反馈、多轮面试模拟、面试报告。 智能机器人功能提供24/7客服支…

学习之使用IDEA集成GIT

一、环境准备 1.1 配置git忽略文件 git.ignore 文件模版内容如下: # Compiled class file *.Class#Log file *.log# BlueJ file *.ctxt# Mobile Tools for Java (J2Me) *.mtj.tmp/# Package File *.jar *.war *.nar *.ear *.zip *.tar.gz *.rar.classpath .project .settings…

简单接口自动化框架实现(Python+requests+pytest)

1、接口自动化流程 1.需求分析2.挑选需要做自动化测试的功能3.设计测试用例4.搭建自动化测试环境[可选]5.设计自动化测试项目的架构[可选]6.编写代码7.执行测试用例8.生成测试报告并分析结果 2、框架结构 --api -->封装请求 --scripts -->编写测试脚本…

Python基础(六)——PyEcharts数据可视化初级版

案例 【前言:为了巩固之前的Python基础知识(一)到(五),并为后续使用Python作为数据处理的好帮手,我们一起来看几个例子】 使用工具:Echarts Echarts 是一个由百度开源的数据可视化…

[2025]医院健康陪诊系统(源码+定制+服务)

博主介绍: ✌我是阿龙,一名专注于Java技术领域的程序员,全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师,我在计算机毕业设计开发方面积累了丰富的经验。同时,我也是掘金、华为云、阿里云、InfoQ等平台…

【电路笔记】-运算放大器比较器

运算放大器比较器 文章目录 运算放大器比较器1、概述2、表示2.1 同相比较器2.2 反相比较器3、临界点转换4、施密特触发器4.1 同相触发器4.2 反相触发器4.3 应用5、总结1、概述 在前面的大多数运算放大器文章中,电路都有一个到反相输入的反馈环路。 这种设计是最常见的,因为它…

基于SpringBoot+Vue的企业会议室预定管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

Gin渲染

HTML渲染 【示例1】 首先定义一个存放模板文件的 templates文件夹&#xff0c;然后在其内部按照业务分别定义一个 posts 文件夹和一个 users 文件夹。 posts/index.tmpl {{define "posts/index.tmpl"}} <!DOCTYPE html> <html lang"en">&…

shell指令及笔试题

一&#xff1a;linux基本指令考察 创建文件&#xff0c;直接在本目录的上级目录下创建一个名为dir1的文件夹&#xff0c;并在dir1文件夹下创建一个名为file1的文件 答&#xff1a;本目录的上级目录下创建一个名为dir1的文件:mkdir ../dir1 在dir1文件夹下创建一个名为file1的…

【SQL】百题计划:SQL内置函数“LENGTH“的使用

【SQL】百题计划-20240912 方法一&#xff1a; Select tweet_id from Tweets where LENGTH(content) > 15;– 方法二&#xff1a; Select tweet_id from Tweets where CHAR_LENGTH(content)> 15;

初始c++:入门基础(完结)

打字不易&#xff0c;留个赞再走吧~~~ 目录 一函数重载二引用1 引⽤的概念和定义2引⽤的特性3引⽤的使⽤三inline四nullptr 一函数重载 C⽀持在同⼀作⽤域中出现同名函数&#xff0c;但是要求这些同名函数的形参不同&#xff0c;可以是参数个数不同或者 类型不同。这样C函数调⽤…

HTB-Blue(永恒之蓝漏洞复现)

前言 各位师傅大家好&#xff0c;我是qmx_07&#xff0c;今天给大家讲解Blue靶机 渗透过程 信息搜集 服务器开放了smb服务&#xff0c;漏洞探测显示 具有ms17_010(永恒之蓝漏洞) 利用永恒之蓝 搜索永恒之蓝漏洞 use使用永恒之蓝漏洞 rhost //对方主机 lhost //回连主机 …

一种简单的过某宝验证码的方式(仅做学习使用)

开篇 今天介绍一种简单的过某宝验证码的方式&#xff0c;用的是自动化&#xff0c;这样对不会js逆向的小白非常友好&#xff0c;只需要用到selenium框架就能轻松过某宝验证码&#xff0c;即模拟人的操作对滑块进行滑动。 但是首先还是需要训练验证码和标题 训练前&#xff1a…

心觉:成功学就像一把刀,有什么作用关键在于使用者(二)

Hi&#xff0c;我是心觉&#xff0c;与你一起玩转潜意识、脑波音乐和吸引力法则&#xff0c;轻松掌控自己的人生&#xff01; 挑战每日一省写作174/1000天 上一篇文章讲了成功学到底是个啥 是如何起作用的 为什么有些人觉得没有用&#xff1f; 今天我们再展开来剖析一下这…

openssl 生成多域名 多IP 的数字证书

openssl.cnf 文件内容&#xff1a; [req] default_bits 2048 distinguished_name req_distinguished_name copy_extensions copy req_extensions req_ext x509_extensions v3_req prompt no [req_distinguished_name] countryName CN stateOrProvinceName GuangDong l…

Electron 安装包 asar 解压定位问题实战

背景 在开发 Electron 过程中&#xff0c;我们想知道 Electron 打包的最终形态是什么样的&#xff0c;以便我们能更好的理解 Electron 打包的过程&#xff0c;以及逆向来快速追踪一些问题&#xff0c;例如下面这个报错&#xff0c;以前这类报错都是靠猜&#xff0c;现在则可以…

使用 VSCode 在 Python 中创建项目环境

了解如何管理 Python 项目的不同环境&#xff0c;欢迎来到雲闪世界。 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 介绍 创建数据科学项目非常简单。如今&#xff0c;有了众多资源&#xff0c;您只需选择开发工具并启动项目即可。 除了多个人工智能机…

JDBC 编程

目录 JDBC 是什么 JDBC 的工作原理 JDBC 的使用 引入驱动 使用 常用接口和类 Connection Statement ResultSet 使用总结 JDBC 是什么 JDBC&#xff08;Java Database Connectivity&#xff09;&#xff1a;Java数据库连接&#xff0c;是一种用于执行 SQL 语句的Java…

git学习【持续更新中。。。】

git学习【持续更新中。。。】 文章目录 git学习【持续更新中。。。】一、Git基本操作1.创建本地仓库2.配置本地仓库1.局部配置2.全局配置 3.认识工作区、暂存区、版本库4.添加文件5.修改文件6.版本回退7.撤销修改8.删除文件 二、Git分支管理1.理解分支2.创建、切换、合并分支3.…

AI 时代,大模型产业落地的八大思考

引言 在人工智能领域&#xff0c;大模型技术正逐渐成为推动行业进步的关键力量。随着技术的发展&#xff0c;大模型不仅在学术界引起了广泛的关注&#xff0c;也在产业界展现出巨大的应用潜力。然而&#xff0c;如何将这些强大的模型有效地应用到实际产业中&#xff0c;仍然是…