Vue3 Axios 如何实现双 Token 无感刷新？

在前后端分离的这个大环境下Token 鉴权那可是当今Zui流行的身份认证方式。可咱dou知道，传统的单 Token 模式，说实话，挺有问题的。令牌时间太短了用户频繁掉线，体验感差不说；时间太长了一旦被盗了… 哎呀，那可就麻烦了安全风险可想而知！

所以啊，业界现在dou推崇 双 Token 无感刷新机制。这个东西厉害了Neng在用户完全没察觉的情况下默默续期身份凭证，啥也不弹窗、不跳转、业务操作也不中断。想想就爽！

咱今天就来好好聊聊这个双 Token 无感刷新的事情。从原理分析、前端工程化落地、后端 JWT 签发、并发问题优化到企业级安全规范这几个方面咱们全方位地给你讲讲。保证你学完就Neng直接上手生产环境！

单 Token 的痛点：安全与体验的难题

说回单 Token 模式吧。它就像一个硬币的两面：一方面要保证接口的安全可靠；另一方面也要给用户提供流畅的操作体验。但问题就在这里：两者hen难兼顾啊！

Ru果令牌有效期设置得太短，用户操作多了就会被强制下线。这让用户体验hen差嘛！想想kan，你正在认真工作呢，突然就被踢下线了… 气死人！

反之呢？Ru果令牌有效期设置得太长，一旦令牌被盗用的话… 那就惨了！攻击者就Ke以长期冒用你的身份进行非法操作啦！这绝对是安全漏洞啊！害…

无感刷新的核心价值：让用户永久在线

那么双 Token 无感刷新机制到底有什么价值呢？简单来说就是：通过将不同的职责分离到不同的Token上——长令牌负责身份续期, 短令牌负责接口授权——从而在保证接口安全的前提下自动静默续期登录状态, 实现用户永久在线, 全程无感知,彻底解决主动掉线的问题. 这简直就是解放用户的福音啊！你懂的？

双 Token 设计思想：职责拆分、长短搭配

咱们的双 Token 机制的核心设计思想就是 职责拆分、长短搭配 。简单来说就是利用短期Token保证接口安全, 利用长期Token负责身份续期. 这样就Neng在安全性与用户体验之间找到一个完美的平衡点啦。就像你出门带一把钥匙锁门，同时还把房子的钥匙放在家里确保随时Ke以进出一样。两枚令牌各司其职、互不干扰：这就是我们的目标。

流程解析: 一步一步kan

整个无感刷新流程其实挺清晰的. 我们来一步一步细细分析一下:

首次登录: 用户成功登录后, 后端会生成两枚 JWT: 一个是 *Access Token *, 一个是 *Refresh Token *. Access Token 用于后续的API请求验证; Refresh Token 用于在 Access Token 过期时进行续期.

API 请求: 用户发起 API 请求时, 将 Access Token 发送给后端进行验证.

Access Token 过期检测: 后端会检测 Access Token 是否过期.

无感刷新: Ru果 Access Token 过期, 后端会使用 Refresh Token 生成一个新的 Access Token 和一个新的 Refresh token . 这个过程在后台悄悄进行 , 用户没有任何感知 .

返回新token: 后端将新的 Access token 返回给客户端 .

客户端geng新 token: 客户端收到新的 Access token 后 , geng新自己的 token 信息 , 并继续使用新的 Access token 进行 API 请求 .

咱再详细说说每个环节:

后端 JWT 签发

后端JWT签发其实hen简单, 主要就是生成两个JWT: 一个是Access token和一个Refresh token 。这两个JWT里面包含了一些用户信息和权限信息等等内容。

不过要注意的是:

Refresh token 的有效期要比 Access token 长hen多, 一般来说Ke以达到几天甚至几个月的时间。

Refresh token 要存储在安全的存储介质中, 防止被窃取.

Ke以添加一些额外的参数到 JWT 中 , 例如用户的角色信息 、权限列表等等 .

前端工程化落地

前端实现双Token无感刷新的关键在于拦截器. 你需要编写一个拦截器来处理API请求中的token验证和刷新逻辑。

请求拦截器: 在发送 API 请求之前 , 检查是否有有效的 Access token 。Ru果没有 , 则跳转到登录页面 ; Ru果有 , 则将 Access token 添加到请求头中 .

响应拦截器: 在接收 API 响应之后 , 检查响应头中是否包含新的 Access token 。Ru果没有 , 则说明当前 Access token Yi过期 , 需要进行刷新操作 .

刷新token逻辑: 当需要刷新Access token时 , 从本地存储中获取 Refresh token ，然后调用后端 API 来换取一个新的 Access token 和一个新的 Refreshtoken 。Zui后将新的Accesstoken保存到本地存储中 ，并geng新当前页面的Accesstoken信息。.

并发问题优化

并发问题是个 tricky 的地方。Ru果多个请求同时过期并且需要刷新Token的话怎么办呢? 这就需要考虑线程安全的问题了。

咱Ke以用一些技术手段来解决这个问题:

使用锁机制来控制对Refreshtoken的访问.

采用队列的方式来管理待刷新的Refreshtoken.

企业级安全规范

企业级的安全性要求那是相当高的!咱得注意以下几个方面:

使用 HTTPS 来加密所有网络通信.

对Refreshtoken进行加盐加密.

定期轮换Refreshtoken.

总之啊, 双Token无感刷新是一个比较复杂的方案, 但是只要掌握了其核心思想和实现方法, 就Neng够轻松应对各种挑战。 希望这篇文章Neng帮助大家geng好地理解和应用双Token无感刷新机制!

好啦~ 今天就说到这儿吧! 你有什么问题随时douKe以问我哦！

---