前端登录token失效实现双Token无感刷新详细步骤

一、方案背景

在用户登录系统后，为了保障安全性和用户体验，通常采用Token机制进行身份验证。然而，单一的 Token 存在过期问题，导致用户需要频繁重新登录，影响使用体验。为解决这一问题，本方案提出采用双Token机制实现前端登录不掉线的无感刷新。

二、方案目标

• 实现用户登录后，在Token过期前自动刷新，避免用户频繁重新登录。
• 确保刷新过程对用户无感知，不影响用户正常操作。
• 保障系统的安全性，防止非法访问。

三、技术原理

3.1. 双 Token 机制

• Access Token：用于用户身份验证，设置较短的过期时间（如 30 分钟）。在每次请求时，前端将 Access Token 添加到请求头中，服务器验证其有效性后返回请求结果。
• Refresh Token：用于获取新的 Access Token，设置较长的过期时间（如 7 天）。当 Access Token 过期时，前端使用 Refresh Token 向服务器请求新的 Access Token。

3.2. 无感刷新流程

• 前端在发送请求时，先检查 Access Token 是否过期。如果未过期，正常发送请求。
• 如果 Access Token 过期，前端拦截该请求，并使用 Refresh Token 发起刷新请求。
• 服务器验证 Refresh Token 的有效性，如果有效，返回新的Access Token和Refresh Token。
• 前端保存新的Access Token和 Refresh Token，并重新发送之前被拦截的请求。

四、具体实现步骤

4.1. 登录流程

• 用户输入用户名和密码进行登录，前端将登录信息发送给服务器。
• 服务器验证登录信息成功后，生成Access Token和 Refresh Token，并将其返回给前端。
• 前端将 Access Token 和 Refresh Token 保存到本地存储（如 LocalStorage）中。

4.2. 请求拦截

• 使用前端框架的拦截器（如 Vue 的 axios 拦截器）拦截所有请求。
• 在请求发送前，从本地存储中获取 Access Token，并将其添加到请求头中。

axios.interceptors.request.use((config) => {
  const access_token = localStorage.getItem("access_token");
  if (access_token) {
    config.headers.Authorization = `Bearer ${access_token}`;
  }
  return config;
});

4.3. 响应拦截与刷新

• 拦截服务器返回的响应，检查响应状态码。如果状态码为 401（表示 Access Token 过期），则执行刷新操作。
• 设置一个标志位 isRefreshing，防止多个请求同时触发刷新流程。当 isRefreshing 为 true 时，后续请求将被暂存到一个队列中，等待刷新完成后再重新发送。
• 使用 Refresh Token 发起刷新请求，请求新的 Access Token 和 Refresh Token。
• 在刷新请求成功后，更新本地存储中的 Access Token和 Refresh Token，并将标志位 isRefreshing 设置为 false。
• 遍历请求队列，重新发送之前被拦截的请求。

axios.interceptors.response.use(
  (response) => {
    return response;
  },
  async (error) => {
    const { data, status, config } = error.response;
    if (status === 401 && config.url !== "/refresh") {
      const isRefreshing = false;
      if (!isRefreshing) {
        isRefreshing = true;
        try {
          const res = await api.get("/refresh", {
            params: {
              token: localStorage.getItem("refresh_token"),
            },
          });
          localStorage.setItem("access_token", res.data.access_token);
          localStorage.setItem("refresh_token", res.data.refresh_token);
          isRefreshing = false;
          // 重新发送之前被拦截的请求
          return api(config);
        } catch (err) {
          // 刷新失败，跳转到登录页面
          window.location.href = "/login";
        }
      } else {
        // 将请求添加到队列中，等待刷新完成后再重新发送
        requests.push(() => api(config));
      }
    }
    return Promise.reject(error);
  }
);

4.4. 错误处理：

• 如果刷新请求失败（如 Refresh Token 过期或无效），则跳转到登录页面，提示用户重新登录。
• 对于其他类型的错误，根据具体情况进行相应的处理，如显示错误信息等。

五、安全性考虑

• HTTPS 协议：确保所有通信都通过 HTTPS 协议进行，防止Token在传输过程中被窃取。
• 设置合理的过期时间：根据系统的安全要求和用户体验，合理设置 Access Token 和 Refresh Token 的过期时间。Access Token 过期时间较短，减少被滥用的风险；Refresh Token 过期时间较长，但也要定期更换，增加安全性。
• 防止 Refresh Token 泄露：对 Refresh Token 进行严格的保护，避免泄露。例如，不要在 URL 中传递 Refresh Token，只在请求头中传递。
• 限制刷新次数：可以设置Refresh Token的刷新次数限制，防止被恶意刷新。

六、性能优化

• 减少刷新频率：通过合理设置Access Token的过期时间，尽量减少刷新操作的频率。
• 缓存机制：对于一些不经常变化的数据，可以使用缓存机制，减少请求次数，提高系统性能。
• 合并请求：在可能的情况下，将多个请求合并为一个请求，减少网络请求的次数。

七、总结

本方案通过采用双 Token 机制，实现了前端登录不掉线的无感刷新。在保障系统安全性的前提下，提高了用户体验，减少了用户频繁重新登录的麻烦。同时，通过合理的安全性考虑和性能优化措施，确保系统的稳定性和高效性。在实际应用中，可以根据具体业务需求进行适当的调整和优化。

到此这篇关于前端登录token失效实现双Token无感刷新的文章就介绍到这了,更多相关前端双Token无感刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论