五分钟带你详细了解无感刷新Token技术（Vue+express）

来都来了_

已于 2023-12-22 16:06:46 修改

阅读量3k

点赞数 5

文章标签：前端 node.js vue 安全 web安全

于 2023-09-12 16:17:55 首次发布

本文链接：https://blog.csdn.net/weixin_69810763/article/details/132834518

版权

本文介绍了无感刷新Token技术，包括其原理、工作流程以及在用户体验、安全性和服务端负载方面的优势，适用于Web应用、移动应用和多终端登录场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

无感刷新Token技术是一种用于实现持久登录体验的关键技术，它通过在用户登录后自动刷新Token，以延长用户的登录状态，避免频繁要求用户重新登录。本文将介绍无感刷新token技术的原理和实现方式，帮助大家熟练掌握该技术。

一，基本概念

Token是一种用于身份验证和授权的令牌。在用户登录成功后，服务器会生成一个Token，并将其颁发给客户端。客户端在后续的请求中使用Token作为凭证，向服务器证明其身份和权限。Token通常包含一些加密的信息，如用户ID、角色、访问权限等。

为什么需要刷新Token呢？Token有一个有效期，一旦超过有效期，服务器将拒绝使用过期Token进行请求。因此，为了保持用户的登录状态，必须定期刷新Token，以更新其有效期。如果不刷新Token，用户将需要重新进行身份验证，这会导致不便和用户体验下降。

无感刷新Token是一种身份验证机制，旨在提升用户体验同时保护用户的安全。传统的身份验证机制需要用户在每次请求时提供用户名和密码，相对繁琐且容易导致用户流失。

无感刷新Token的基本概念是，在用户登录成功后，后端服务器会为其生成一个Token，作为身份凭证。前端会保存该Token，并在每次请求时将其添加到请求头中。

Token通常是一个由服务器生成的长字符串，其中包含了用户的身份信息、过期时间等相关信息。后端服务器使用密钥对Token进行签名，以确保其真实性和完整性。而前端通过拦截器获取到Token，并将其存储在本地，如LocalStorage。

当用户再次发送请求时，前端会从本地获取Token，并将其添加到请求头的Authorization字段中。后端服务器会对请求头中携带的Token进行解析和校验，以验证用户的身份。

若Token在一定时间内没有过期，则后端会正常处理用户的请求。但当Token即将过期时，后端服务器会在响应中返回一个新的Token，并将其作为响应头的一部分。前端的拦截器会检查响应中是否存在新的Token，并将其保存在本地。这样，在后续的请求中，前端会继续使用最新的Token进行身份验证。

无感刷新Token的好处是，用户只需要在登录成功后获取一次Token，并将其保存在本地。之后的请求中，用户无需再手动输入用户名和密码进行身份验证，提高了用户的使用体验。

当用户主动退出登录或Token过期失效时，需要重新进行登录获取新的Token。这样可以确保用户的身份安全，并有效防止Token被恶意利用。无感刷新Token的实现方式可以通过配合使用Token过期时间、刷新Token和黑名单等机制来确保用户的身份安全性。

二，工作原理

无感刷新Token的基本原理就是在用户登录后将Token保存在本地，并在每次请求时将Token添加到请求头中进行身份验证。

具体流程

用户登录：用户输入用户名和密码进行登录，后端服务器验证身份并生成一个Token。
响应头中返回Token：后端服务器在登录成功后，在响应头中返回生成的Token。
前端保存Token：前端通过响应拦截器获取响应头中的Token，并将其保存在本地，例如使用LocalStorage。
请求携带Token：在每次发送请求时，前端将保存的Token添加到请求头的Authorization字段中。
后端校验Token：后端使用中间件对请求进行拦截，并对携带的Token进行校验和解析，以验证用户的身份。
Token过期处理：如果后端验证发现Token过期，会在响应中返回一个新的Token。
前端更新Token：前端的响应拦截器检查响应中是否存在新的Token，若存在，则将新的Token保存在本地。
下次请求携带最新Token：下次发送请求时，前端会从本地获取最新的Token，并添加到请求头中进行身份验证。
使用无感刷新Token机制后，用户只需要在成功登录后获取并保存Token，之后每次请求都会自动携带Token进行身份验证，在Token未过期的情况下，用户无需再次输入用户名和密码进行登录，实现了免登录或减少登录次数的效果。然而，当用户退出或Token过期失效时，需要重新进行登录获取新的Token。

前端部分

登录：在登录页面，用户输入用户名和密码后，发送登录请求给服务器。服务器验证用户身份后，生成并返回一个Token给客户端。客户端将Token保存在本地，例如在浏览器的LocalStorage中。
发送请求：在每次发送请求时，客户端需要将Token作为凭证添加到请求头的Authorization字段中

import axios from 'axios';

// 创建axios实例

const instance = axios.create({

// 设置baseURL等配置项

baseURL: 'https://api.example.com',

// ...

});

// 添加请求拦截器

instance.interceptors.request.use(

config => {

// 从localStorage或任何其他地方获取Token

const token = getToken();

// 添加Token到请求头的Authorization字段中

if (token) {

config.headers.Authorization = 'Bearer ' + token;

}

return config;

},

error => {

return Promise.reject(error);

}

);

// 获取Token

function getToken() {

// 在这里从本地获取保存的Token，例如使用LocalStorage

return localStorage.getItem('token');

}

处理响应：在收到响应时，客户端需要检查响应头中是否有新的Token。如果有，客户端需要将新的Token保存在本地，以便在下次请求时使用。


// 添加响应拦截器

instance.interceptors.response.use(

response => {

// 检查响应头中是否有新的Token

const newToken = response.headers['new-token'];

// 如果存在新Token，保存在本地

if (newToken) {

saveToken(newToken);

}

return response.data;

},

error => {

return Promise.reject(error);

}

);

// 保存Token

function saveToken(token) {

// 在这里保存Token到本地，例如使用LocalStorage

localStorage.setItem('token', token);

}

后端部分

// 服务器端验证和刷新Token

function verifyToken(req, res, next) {

const token = req.headers.authorization.split(' ')[1]; // 从请求头中获取Token

// 验证Token是否过期或无效，如果过期则进行刷新

if (isTokenExpired(token)) {

const refreshedToken = refreshToken(token); // 刷新Token

res.setHeader('Authorization', 'Bearer ' + refreshedToken); // 将新的Token添加到响应头中

}

next();

}

// 路由中间件，用于请求的认证和处理

app.get('/protected', verifyToken, (req, res) => {

// 在这里处理受保护的路由请求

});

// 检查Token是否过期

function isTokenExpired(token) {

const decodedToken = decodeToken(token);

const currentTime = Date.now() / 1000; // 当前时间

return decodedToken.exp < currentTime; // 如果Token的过期时间小于当前时间，则表示Token已过期

}

// 刷新Token

function refreshToken(token) {

const decodedToken = decodeToken(token);

// 生成新的Token

const newToken = generateToken(decodedToken.userId, decodedToken.role);

// 在这里将新的Token存储到数据库或缓存中，以便后续的验证和使用

return newToken;

}

// 解码Token

function decodeToken(token) {

// 在这里解码Token，获取其中的信息

// 例如，可以使用jsonwebtoken库进行解码

const decoded = jwt.verify(token, 'secretKey');

// 返回解码后的Token信息

return decoded;

}

// 生成Token

function generateToken(userId, role) {

// 在这里生成新的Token

// 例如，可以使用jsonwebtoken库进行生成

const token = jwt.sign({ userId, role }, 'secretKey', { expiresIn: '1h' });

// 返回生成的Token

return token;

}

服务器在每次请求中的路由中间件中验证Token的有效性。如果Token即将过期，则调用refreshToken函数生成一个新的Token，并将新的Token添加到响应头的Authorization字段中返回给客户端。客户端在下次请求时，会使用新的Token进行身份验证

三，优势

用户体验改善：无感刷新Token技术可以在用户无感知的情况下，自动刷新访问令牌，避免了用户在过期后需要重新登录的操作，提高了用户体验。
安全性提升：通过无感刷新Token技术，可以减少因为Token过期而导致的用户访问权限问题。同时，在访问令牌过期后，通过自动刷新获取新的访问令牌，避免了客户端传输和保存用户凭证（如用户名和密码）的风险。
降低服务端压力：相比于每次请求都需要服务端检查访问令牌的有效性，无感刷新Token技术将刷新操作从服务端转移到了客户端，减轻了服务端的负担，提高了服务端的并发处理能力。

四，使用场景

Web应用或移动应用中：在Web应用或移动应用中，通过无感刷新Token技术，可以实现用户登录后，自动刷新访问令牌，使用户无需在过期后重新登录。
单页应用（SPA）中：在单页应用中，页面无刷新，因此无法通过传统方式进行Token刷新。通过无感刷新Token技术，可以在后台自动刷新访问令牌，保持用户会话的持续性。
使用长时间访问令牌的应用：有些应用使用长时间访问令牌（比如30天），为了保证安全性，需要定期刷新访问令牌。无感刷新Token技术可以方便地实现这个刷新过程。
多终端登录应用：在多终端登录的应用中，如电子商务平台或社交媒体，用户可能会在不同的设备上同时登录。通过无感刷新Token技术，可以保持用户在各个设备上的登录状态同步。

总结

无感刷新Token技术是一种在客户端应用中自动刷新访问令牌的机制，它通过提供用户无感知的刷新操作，改善了用户体验，提高了安全性，同时减轻了服务端的负担。这项技术适用于各种Web应用、移动应用和单页应用等场景，特别适用于需要长时间访问令牌和多终端登录的应用。通过无感刷新Token技术，我们能够在保证用户会话持续性的同时，提供更好的安全性和便利性。