哎哟喂，大家好！咱今天聊点有意思的，就是前端的双Token机制，特别是那种无感刷新，听起来高大上，其实就是让你不被打断体验。以前我Zuo过一个项目，搞了个单Token续期，结果用户反馈说每次刷新dou卡顿，体验不行。害得我半夜三gengdebug到半夜。所以后来咱就换成双Token方案，爽到飞起！

为什么百度不收录？

嗯... 这个问题问得好。说实话，以前也琢磨过百度不收录的原因。我觉得可Neng跟技术细节有关吧。比如双Token机制的实现比较复杂，涉及前端和后端交互、数据加密等等。搜索引擎可Neng觉得内容geng新速度快，而且涉及动态逻辑，收录维护成本高。或者说咱的文章是给开发者kan的教程性质的，百度可Neng认为它不是面向大众用户的直接信息来源。不过没关系啦！咱写得够透彻就行！

什么是双Token机制？

简单来说就是Access Token和 Refresh Token两张牌一起玩。Access Token就像你的通行证，用于访问服务器上的资源；Refresh Token就像备用通行证，用来获取新的 Access Token。

传统单Token方案呢？每次 Access Token 过期了dou要重新登录或者重新授权才Neng继续用。这会导致用户体验hen差：页面卡死、交互中断等等。

双Token机制的好处就是：即使 Access Token 过期了也不用重新登录！Refresh Token 来帮你续期就行。

Access Token 和 Refresh Token 的职责分工

咱来捋一捋各自的职责吧。

Access Token: 用于访问服务器端资源的令牌。有效期较短。

Refresh Token: 用于获取新 Access Token 的令牌。有效期较长。

你懂的，Access Token 就像你今天的交通卡余额一样快用完；Refresh Token 就像你的储值卡余额一样充值一下就Neng继续用。

无感刷新的核心原理

无感刷新主要依赖于 **Server-Sent Events ** 或者 **WebSocket** 技术。 SSE 是一种长连接协议,后端推送数据给前端,不需要前端主动请求. WebSocket 则提供全双工通信通道,允许客户端和服务器实时通信.

当 Access Token 过期时, 前端会向后端发送 Refresh Request 。 后端验证 Refresh Token 是否有效后, Ru果有效则返回新的 Access Token 和新的过期时间. 此时, 前端无需页面刷新, 自动使用新的 Access Token 继续访问资源. 感觉是不是hen神奇？

完整流程详解

用户首次访问: 前端获取 Access Token 和 Refresh Token .

Access Token 过期: 当 Access Token 到期后, 前端会触发续期逻辑.

发送 Refresh Request: 前端向后端发送包含 Refresh Token 的请求.

后端验证: 后端验证 Refresh Token 是否有效 .

返回新 Tokens: Ru果验证成功, 后端返回新的 Access token 和新的过期时间.

geng新本地 Tokens: 前端geng新本地存储的 Access token 和过期时间.

无感续期生效: 客户端自动使用新 token 继续访问资源, 无需手动操作.

实现细节

实现过程中还有一些细节需要注意:

存储 Tokens: 如何安全地存储 Access token 和 refresh token 是关键问题. Ke以考虑 localStorage , sessionStorage , 或者使用浏览器提供的 Cookie API. 你Ke以自己选择Zui适合的方式!

错误处理: Ru果 refresh request 失败, 需要告知用户并引导他们重新登录.

token 版本控制: 为了防止兼容性问题, Ke以考虑使用版本控制策略来管理 tokens. 例如每次refresh时增加版本号或者添加其他标识符. 这Neng保证前后端同步情况! 不然就容易出问题!

防 CSRF

不对不对!我说错了!应该是 CSRF 防御而不是防 XSS!

啊哈! 我刚才搞错了! 要防的是 CSRF 哦! `CSRF` 防御是为了防止恶意网站伪造用户的请求。 一般采用以下方法：

使用 SameSite Cookie 在请求中携带随机token 验证请求来源

常见踩坑 Refresh token 失效

RefreshToken 有效期设置不合理 RefreshToken 在服务端未正确revoke 客户端缓存失效导致无法验证

Session 管理

Session ID 与 Refresh token 关联失败 Session 数据丢失导致无法恢复

兼容性问题

不同浏览器对 Cookies 或 localStorage 的支持差异 旧版本的浏览器不支持 SSE 或 WebSocket

\t

\t

\t

\t

哎呀说完了！一下：双Token机制配合无感刷新功NengKe以大大提升用户体验。 当然啦 实现起来也需要注意一些细节。 希望这篇文章Neng帮到你！Ru果你有什么问题欢迎留言讨论哈！哈哈~

---