Vue3双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 过期时刷新认证。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论