安志合的学习博客
·
前后端JWT认证使用accessToken与refreshToken实现无感刷新
💡
原文中文，约7200字，阅读约需18分钟。
📝
内容提要
这篇文章介绍了如何使用JWT和refreshToken实现无感刷新。前端使用Vue和Axios，后端使用Python和Sanic。文章提供了前后端的具体代码实现。
🎯
关键要点
- 文章介绍了如何使用JWT和refreshToken实现无感刷新。
- 前端使用Vue 2.7、TypeScript 2.8.0、Axios 0.27和Vuex 3.6。
- 后端使用Python 3.11、Sanic 23.3.0和PyJWT 2.0.0。
- 前端代码主要涉及axios的请求和响应拦截器。
- 使用refreshToken函数来刷新token。
- validateJWT函数用于验证JWT的有效性。
- 在登录认证通过后设置accessToken和refreshToken，退出时清空所有token。
- 后端代码主要包括生成token和刷新token的逻辑。
- 登录相关操作包括用户认证和token生成。
- 使用JWT认证的接口需要进行token校验。
❓
延伸问答
如何使用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，如果刷新失败则要求用户重新登录。
➡️
