Vue3双token加密登录及注册方式
作者：酒江
本文介绍了双Token机制在Vue3应用中的实现,包括登录/注册、请求拦截、响应拦截、Token存储、退出登录等流程,重点是Token的刷新逻辑和安全性
一、核心思路
双 Token 机制：
- Access Token：短期有效，用于请求 API。
- Refresh Token：长期有效，用于刷新 Access Token。
认证流程：
- 用户登录或注册成功后，后端返回
access_token和refresh_token。 - 前端将 Token 安全存储（如
localStorage或cookie）。 - 每次请求 API 时，在请求头中携带
access_token。 - 当
access_token过期时，使用refresh_token获取新的access_token。 - 如果
refresh_token也过期，则强制用户重新登录。
二、实现步骤
登录/注册：
- 用户提交表单后，调用后端接口获取
access_token和refresh_token。 - 将 Token 存储到
localStorage或cookie中。
请求拦截：
- 使用 Axios 拦截器，在每次请求时自动添加
access_token到请求头。
响应拦截：
- 拦截 401 错误（Token 过期），尝试使用
refresh_token刷新access_token。 - 如果刷新成功，更新
access_token并重试请求。 - 如果刷新失败，清除 Token 并跳转到登录页。
安全存储：
- 使用
localStorage或cookie存储 Token，确保数据安全。 - 可以考虑对 Token 进行加密存储。
退出登录：
- 清除存储的 Token，并跳转到登录页。
三、关键点
Token 刷新逻辑：
- 使用
refresh_token调用后端接口获取新的access_token。 - 避免重复刷新（通过
_retry标志位）。
安全性：
- 使用 HTTPS 加密传输。
- 避免将 Token 暴露在前端代码中。
用户体验：
- 在 Token 过期时自动刷新，减少用户重新登录的频率。
Vue 3 双 Token 加密登录和注册的基本逻辑流程如下：
注册：
- 用户提交注册信息（如用户名、密码）。
- 后端验证用户信息合法性（如密码强度、用户名唯一性）。
- 后端生成一个加密的 Token（比如 JWT），并返回给前端。
- 前端保存 Token，通常会将其存储在
localStorage或sessionStorage。
登录：
- 用户提交登录信息（如用户名、密码）。
- 后端验证用户凭证是否合法。
- 如果验证成功，后端返回两个 Token：一个用于身份验证的
access_token，另一个用于刷新身份的refresh_token。 - 前端保存
access_token和refresh_token。
access_token 用于 API 请求时携带。
refresh_token 用于刷新过期的 access_token。
请求保护接口：
- 前端每次发起需要认证的请求时，携带
access_token（通常放在 HTTP 请求头中）。 - 后端验证
access_token，如果有效则返回数据；如果无效，后端通过refresh_token获取新的access_token。
刷新 Token：
- 当
access_token过期时，前端使用refresh_token通过接口请求获取新的access_token。 - 后端验证
refresh_token是否有效，如果有效则返回新的access_token。
四、总结
通过双 Token 机制，可以有效提升应用的安全性，同时保证用户体验。
核心在于：
- Token 的获取与存储。
- 请求与响应拦截器的实现。
- Token 刷新逻辑的处理。
这种机制适用于需要高安全性的应用场景，如金融、电商等。
前端通过双 Token（access_token 和 refresh_token）机制处理身份验证和授权，access_token 用于访问保护接口，refresh_token 用于在 access_token 过期时刷新认证。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。