记录一次协商缓存导致的token续期的 bug

这个问题的起因是过年前非得要求给系统加个 Token 续期的功能,不加还不高兴,得,没办法,看来只有我不高兴了,反正闲着也是闲着,加呗。

背景

我们采用的 Token 续期方案是每次请求接口时会验证 Token 是否要过期了,如果要过期了后端则会将替换为新的 Token 在 Header 上返回来,前端发现请求中有这个请求头则会替换为新的 Token。

问题

果然,人还是不要太闲。

年后,我还在请假中,测试同学突然说,急急急,你这 Token 续期有问题哇,老用着用着就报登录超时错误打到登录页面去了,而且只要出现过一次,每次登录进入这个页面就会出现登录超时的问题了。

什么情况?飞来一锅,我年前自测这么多次都没问题,你一用就有问题?人品问题???

然后,我嫩是没有复现出来。

A few later...

忙活了大早上,从测试同学浏览器发现,咦,咋到报错那个接口 Token 就变了哇,哪儿来的 Token。后面才发现是协商缓存的问题。

什么是协商缓存

额,懒得写了。

总结来说就是,浏览器请求服务器时会附带资源标识,如果资源更新了,服务器会带上新的资源返回 200,如果资源没有更新,则会返回 304,浏览器读取缓存资源。

问题原因

问题的关键就是出在浏览器读取缓存资源这儿,你资源读缓存,Header 咋还用缓存哇。没错,浏览器 Header 它也用了缓存,假如有个接口头上戴了一个老的 Token(假设是 2024/2/22 10:00颁发的),然后刚好被缓存了,后面假如资源没有变化的话每次这个接口请求过后 Token 都会被换成老的 Token。哭。

至于为啥我自测没发现呢,因为我每次自测都是打开控制台且禁止缓存的。。。(这个习惯不好。。得改)

解决方案

知道了问题的原因解决起来就简单了。下面是几种解决方案:

  1. 接口不允许缓存,前端请求头加 cache-control: no-cache
  2. 与后端约定新的 Token 不放在 Header 上,使用一个状态码标记,然后放在响应体里面。
相关推荐
vivo互联网技术2 分钟前
深度解析悟空系统多机房部署共线改造
前端·npm·多语言·共线改造·多机房
JYeontu2 分钟前
程序员都该掌握的“质因数分解”
前端·javascript·算法
薛定谔的算法2 分钟前
有了HTML、CSS、JS为什么还需要React?
前端·javascript·react.js
方安乐4 分钟前
react之shadcn(一)
前端·react.js·前端框架
阿珊和她的猫7 分钟前
优化过多并发请求的技术策略
前端·javascript·vue.js
阿里云云原生14 分钟前
Agent 越用越聪明?AgentScope Java 在线训练插件来了!
前端·agent
fengci.20 分钟前
ctfshow渔人杯
前端
holeer30 分钟前
【V1.0】Typora 中的 HTML 支持|软件文档自翻译
前端·编辑器·html·typora·web·markdown·文档
敲代码的小吉米31 分钟前
JS两种复制到剪贴板的方法
前端·javascript
NEXT0636 分钟前
React 核心揭秘:虚拟 DOM 原理与 Diff 算法深度解析
前端·react.js·面试