JavaScript 如何做 token 刷新

打开浏览器，登录常用的网站账号后，可能会把网页放在后台一整天，中途没操作，等再次点击时，却被跳转到了登录页。这种情况大多是因为“身份凭证失效”，而token刷新就是解决这个问题的核心方法之一。

什么是token？先搞懂这个“身份小票”

要理解token刷新，得先明白token是什么。你可以把它比作商场存包柜的小票：第一次登录网站时，系统会给你这张小票，你每次去柜子取东西（发起请求、获取数据），不用再报身份证，只要出示这张小票就行。

这个“小票”就是token，它是服务器生成的一串字符串，存在浏览器里（比如存在本地存储、cookie里），用来证明你是合法登录的用户。但和商场小票一样，token的有效期很短，比如一般设为1小时，过期后就没法再用来取东西了，也就是我们常说的“登录失效”。

为什么需要token刷新？

刚才说token有效期短，要是用户刚登录就过期，那每次操作都得重新输账号密码，体验太差。token刷新就是让token快过期时，自动生成新的“身份小票”，不用用户手动登录，保持会话不中断。

比如你用外卖APP点单，中午登录后下午继续刷，要是token到期，APP自动悄悄给服务器发个“我还在使用的信号”，服务器就给个新token，你不用重新登录就能继续点单。

JavaScript实现token刷新的核心步骤

JavaScript做token刷新，本质就是写一段“自动换小票”的逻辑，核心分4步，每一步都和我们的日常操作对应。

先存好“备用小票”（refresh token）

光有短有效期的access token（刚才说的普通token）还不够，还需要一个更长有效期的refresh token，也就是“备用小票”。它的作用只有一个：专门用来申请新的access token，不能直接用来访问网站的核心内容。

比如你把备用小票存在浏览器的本地存储里，每次打开APP，就先检查access token的有效期。

检查token是否快过期

access token快要过期前，就得触发刷新。JavaScript里可以通过解码token里的时间戳来判断，比如token里记录了生成时间和过期时间，计算一下当前时间和过期时间的差，要是差不到5分钟，就准备刷新。

你可以把这个逻辑写成一个公共函数，每次发起请求前先跑一遍这个函数，提前判断要不要刷新。

自动用refresh token换新token

确认要刷新后，JavaScript就悄悄给服务器发一个请求，带上refresh token，服务器验证通过后，就返回新的access token，可能还会更新refresh token的有效期。

这里要注意，这个刷新请求不能影响用户的正常操作，得悄悄发，比如用异步请求，用户完全察觉不到。

替换旧token，继续正常请求

拿到新的access token后，JavaScript要把浏览器里旧的access token换掉，再把新token存起来，这样用户接下来的所有请求都会用新token，不会再出现“被踢回登录页”的情况。

比如你在购物车加商品时，本来要带旧token，刷新后就自动带新token，购物车数据不会断。

实际应用中的小细节

做token刷新时，还要注意几个小问题：比如要是用户同时发了好几个请求，这时候只需要触发一次刷新，不用重复请求；还有要是refresh token也过期了，就得真的跳转到登录页，让用户重新登录，不能无限循环刷新。

再比如有些网站会把token存在cookie里，JavaScript不用自己存，浏览器会自动带cookie，这时候刷新逻辑还是一样，只是换token的操作由服务器处理，JavaScript只需要处理时机判断就行。

其实token刷新就是用一段简单的JavaScript逻辑，让系统自动完成“续期”，不用用户手动干预，这也是现在大多数网站保持登录状态的常用方法。下次遇到登录失效的情况，你就知道背后是这个“自动续小票”的机制在起作用啦。