前后端JWT认证使用accessToken与refreshToken实现无感刷新
内容提要
这篇文章介绍了如何使用JWT和refreshToken实现无感刷新。前端使用Vue和Axios，后端使用Python和Sanic。文章提供了前后端的具体代码实现。
延伸解读
无感刷新的关键：并发请求的队列处理
当accessToken过期时，多个并发请求可能同时触发401错误。文章通过refreshing标记和queue队列，确保只发起一次刷新请求，其他请求挂起等待。刷新成功后，队列中的请求用新token重试，避免了重复刷新和请求丢失。这种设计是前端无感刷新的核心，能有效提升用户体验。
前后端Token过期时间需协调配置
后端通过SystemCnf类设置access_token_expires_in和refresh_token_expires_in，但文章未给出具体数值。实际部署时，accessToken应较短（如几分钟到几小时），refreshToken较长（如几天到几周）。前端validateJWT函数解析JWT的exp字段判断是否过期，因此前后端时间需同步，否则可能导致误判。
刷新失败后的降级处理与路由跳转
如果refreshToken也过期，刷新接口返回code不为1，前端会清空所有token并跳转到登录页，同时携带redirect参数记录原路径。此外，代码对/login、/refresh_token等路径做了排除，避免循环跳转。这种降级处理保证了安全性，但用户需重新登录，可能中断操作。
后端JWT校验与接口放行策略
后端使用Sanic中间件校验请求中的JWT，若token过期或无效则返回401。但/refresh_token接口必须加入EXCLUDE_PATH放行，否则无法刷新。文章还提到对/api/v1/xxx/路径的排除，可能是公开接口。这种白名单机制需谨慎维护，避免安全漏洞。
Q&A
如何使用JWT和refreshToken实现无感刷新？
通过前端使用Axios拦截请求和响应，结合refreshToken函数来刷新token，确保用户在token过期时无感知地继续使用应用。
前端使用了哪些技术栈？
前端使用了Vue 2.7、TypeScript 2.8.0、Axios 0.27和Vuex 3.6。
后端如何生成和刷新token？
后端使用Python和Sanic，通过gen_token函数生成token，使用re_gen_token函数刷新token。
如何验证JWT的有效性？
使用validateJWT函数，通过解析JWT并检查其过期时间来验证有效性。
在用户退出时如何处理token？
在用户退出时，清空所有token，包括accessToken和refreshToken。
如何处理token过期的情况？
当token过期时，前端会调用refreshToken函数尝试刷新token，如果刷新失败则要求用户重新登录。
