自动续期 双token流程

为什么需要自动续期

从状态维护说起 http是一个无状态协议 必须靠一些 特定的技术 实现状态的维护 传统web中 session

过程 浏览器输入用户名密码 后端 获取参数 校验登录成功

存储在内存中 否则 后返回 sessionid 浏览器通过 cookie存储 内存存一个sessionid 用户后续请求 都携带 jssionid 后端去和内存的

sessionid 进行比对

只要后续 用户发送的任何请求 携带好这个token 后端就认为其是合法请求

断开连接的情况 1 用户在浏览器 手动删除了这个 jssionid

服务器 内存中的 sessionid 可能会 自动删除

多个用户生产多个sessionid可能影响性能 因此 会设置一个有效期

假设有效期 5分钟 有些请求 间隔时间较长 可能导致用户要重新去 登录 影响 用户体验 此时就需要续期

续期就是 5分钟 不够我 再加5分钟 不够再加 而 自动续期体现自动 整个过程用户无感知 服务器 判断用户的 jwt时间

自动续期也不是无休止的续期下去 会加入一个最终有效期 如果没有达到最终有效期 就可以自动 到了就需要用户再重新登录

jwt

jwt jesonwebtoken

由三部分组成

header是 加密算法

payload是 实际数据 唯一表示 签发人时间自定义数据 base64等

signatiure 对前两个进行整合

Toke流程

  1. 用户登录向服务端发送账号密码,登录失败返回客户端重新登录。登录成功服务端生成 accessToken 和 refreshToken,返回生成的 token 给客户端。

  2. 在请求拦截器中,请求头中携带 accessToken 请求数据,服务端验证 accessToken 是否过期。token 有效继续请求数据,token 失效返回失效信息到客户端。

  3. 客户端收到服务端发送的请求信息,在二次封装的 axios 的响应拦截器中判断是否有 accessToken 失效的信息,没有返回响应的数据。有失效的信息,就携带 refreshToken 请求新的 accessToken。

  4. 服务端验证 refreshToken 是否有效。有效,重新生成 token, 返回新的 token 和提示信息到客户端,无效,返回无效信息给客户端。

  5. 客户端响应拦截器判断响应信息是否有 refreshToken 有效无效。无效,退出当前登录。有效,重新存储新的 token,继续请求上一次请求的数据。

相关推荐
一只小阿乐2 小时前
react 封装弹框组件 传递数据
前端·javascript·react.js
533_3 小时前
[element-plus] el-tree 动态增加节点,删除节点
前端·javascript·vue.js
禁止摆烂_才浅3 小时前
前端开发小技巧-【JavaScript】- 获取元素距离 document 顶部的距离
前端·javascript·react.js
wshzd3 小时前
LLM之Agent(二十九)|LangChain 1.0核心组件介绍
前端·javascript·langchain
程序猿_极客3 小时前
Vue 2脚手架从入门到实战核心知识点全解析(day6):从工程结构到高级通信(附代码讲解)
前端·javascript·vue.js·vue2学习笔记
q***71853 小时前
海康威视摄像头ISUP(原EHOME协议) 摄像头实时预览springboot 版本java实现,并可以在浏览器vue前端播放(附带源码)
java·前端·spring boot
一只小阿乐3 小时前
vue3 使用v-model开发弹窗组件
javascript·vue.js·elementui
web加加3 小时前
vue3 +vite项目页面防f12,防打开控制台
前端·javascript·vue.js
A尘埃4 小时前
大模型应用python+Java后端+Vue前端的整合
java·前端·python
遥遥晚风点点4 小时前
Spark导出数据文件到HDFS
前端·javascript·ajax