Token无感知刷新

最新推荐文章于 2025-06-28 10:41:09 发布

LiuPing_Xie

最新推荐文章于 2025-06-28 10:41:09 发布

阅读量539

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端小知识文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_36877763/article/details/136692670

前端小知识专栏收录该内容

22 篇文章

订阅专栏

本文介绍了在前后端分离应用中，如何通过无感知刷新Token解决因token有效期导致的认证问题，包括使用axios进行请求、处理401状态、定时刷新以及考虑RefreshToken的安全性。

前言

在前后端分离的应用中，使用token进行交互验证是一种比较常见的方式。但是，由于token的有效期限制，需要不断地刷新token，否则会导致用户认证失败。

栗子

可以幻想一下，你在一个应用中，填写了很多个表单，最后提交的时候，401认证失败，这个时候你心里肯定一万个....所以为了解决这个问题，给用户更好的体验，本文介绍无感知刷新token的实现。

token验证的原理

在web应用中，常见的token认证方式有基于token和基于cookie的认证。基于token的认证方式是，将认证信息每次放在请求头中，在每次发起请求时，将token发给服务端认证，而基于cookie的认证方式是，客户端本地存储的cookie文件来记录用户的操作状态在随后的访问请求中，客户端浏览器会检索与用户请求资源相匹配的Cookie，并将其提交给Web服务器进行验证。如果Cookie合法，则允许用户访问请求的资源，反之则拒绝用户的访问请求。

什么是无感知刷新token

无感知刷新Token是指在Token过期之前，系统自动使用Refresh Token获取新的Access Token，从而实现Token的无感知刷新，用户可以无缝继续使用应用。在实现无感知刷新token的时候需要考虑以下几点：

如何判断token是否过期?
如何在token过期时，自动使用Refresh Token获取新的Access Token?
Refresh Token安全性?

代码实现-第一步

使用axios作为客户端请求库

import axios from 'axios';  
// 设置 tokens 到 localStorage 或其他持久化存储中  
function setTokens(data) {  
    localStorage.setItem('access_token', data.access_token);  
    localStorage.setItem('refresh_token', data.refresh_token);  
}  
// 假设 login 是用户登录函数，从后端获取 tokens  
async function login() {  
    const response = await axios.post('/login', { username: 'USERNAME', password: 'PASSWORD' });  
    setTokens(response.data);  
}

代码实现-第二步

设置请求头，添加token

axios.defaults.headers.common['Authorization'] = `Bearer ${accessToken}`;

有不明白axios基本设置的同学，可以查看axios官方文档

代码实现-第三步

拦截401 Authorization状态

// 当请求失败并返回 401 时，尝试使用 refresh token 获取新的 access token  
axios.interceptors.response.use(undefined, (error) => {  
    if (error.response && error.response.status === 401 && localStorage.getItem('refresh_token')) {  
        return axios.post('/refresh_token', { refresh_token: localStorage.getItem('refresh_token') })  
            .then((response) => {  
                setTokens(response.data);  
                error.config.headers['Authorization'] = 'Bearer ' + response.data.access_token; // 用新的token发送请求  
                return axios(error.config); // 让请求再次发送  
            });  
    } else {  
        return Promise.reject(error); // 否则，返回原始错误信息  
    }  
});

代码实现-第四步

设置定时刷新token

为了避免Access Token过期时间太长，可以使用定时器定时刷新token，在每次刷新后重新设置Access Token和Refresh Token

function refreshToken() {
  const refreshToken = localStorage.getItem('refresh_token');
  axios.post('/refresh_token', { refresh_token: localStorage.getItem('refresh_token'))
    .then(response => {
      setTokens(response.data);
      axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}`;
    })
    .catch(error => {
      console.error(error);
    });
}

setInterval(refreshToken, 5 * 60 * 1000); // 每5分钟刷新Token

安全性考虑

在实现无感知刷新Token的过程中，需要考虑到Refresh Token的安全性问题。因为Refresh Token具有长期的有效期限，一旦Refresh Token被泄露，攻击者就可以使用Refresh Token获取新的Access Token，从而绕过认证机制，访问受保护的API。