日常开发中,关于双token机制的介绍及双token的优点
Token是一种身份验证机制,它通常以字符串的形式存储在客户端(如浏览器)中,并在每个请求中传递给服务器。服务器可以使用它来验证客户端身份,并基于此决定是否授权传输客户端要访问数据资源。
然而,Token有一个缺点,就是它有一个过期时间(通常为几小时),如果过期后客户端需要重新获取新的Token才能访问受限数据资源。那么为了减少客户端需要反复请求Token的次数,我们可以使用双token机制,即增加一个RefreshToken。
双token机制:accessToken、refreshToken
双token机制通常用于确保用户安全登录,主要是通过分发两个token来实现:一个是refresh token,一个是access token。其中,refresh token相对更加安全,不会随着每次请求发送到服务器,通常只有在用户主动登出或者refresh token过期时才会使用。
RefreshToken是一个长期有效的Token,它用于在Token过期时获取新的Token。客户端通常在请求中使用Token,当Token过期时,客户端将使用RefreshToken请求新的Token。服务器收到带有RefreshToken的请求时,将检查RefreshToken的有效性,并使用它来生成新的Token,同时返回新的Token和新的RefreshToken。客户端将使用新的Token更新本地存储,并使用新的RefreshToken代替旧的RefreshToken。
双token机制的优点主要体现在以下几个方面:
1、安全性高:refresh token不需要频繁传输,可以延长用户的登录时间,增加了安全性。
2、用户体验好:用户可以在一定时间内保持登录状态,不需要频繁登录。
3、服务器负担小:服务器只需要验证access token,减少了服务器的负担。
双token机制的具体实现细节如下:
1、在登录时,服务器将返回accessToken和refreshToken。我们将两个Token都存储在客户端本地,例如localStorage中。
localStorage.setItem('accessToken', response.data.accessToken);
localStorage.setItem('refreshToken', response.data.refreshToken);
2、客户端每次请求将带上accessToken。
axios.defaults.headers.common['Authorization'] = `Bearer ${localStorage.getItem('accessToken')}`
3、当accessToken过期时,客户端将使用refreshToken请求新的accessToken。建议将此逻辑封装成一个函数refreshToken。
function refreshToken() {
axios.post('/api/refreshToken', {
refreshToken: localStorage.getItem('refreshToken')
}).then(response => {
localStorage.setItem('accessToken', response.data.accessToken);
localStorage.setItem('refreshToken', response.data.refreshToken);
}).catch(error => {
// 处理刷新Token失败或者RefreshToken过期的情况
});
}
4、在每次请求失败时,我们需要判断错误是否为accessToken过期的错误。如果是,则调用refreshToken函数来刷新accessToken,并重新发起请求。
axios.get('/api/data').then(response => {
// 处理正常返回的情况
}).catch(error => {
if (error.response.status === 401 && error.response.data.code === 'token_expired') {
refreshToken().then(() => {
// 刷新Token成功后,重新发起请求。
axios.get('/api/data').then(response => {
// 处理正常返回的情况
});
});
} else {
// 处理其他错误
}
});
通过上述步骤,就实现了双Token机制,可以减少用户accessToken过期重复登录问题,并且可以在accessToken过期时自动无感刷新accessToken,避免了客户端频繁反复请求的情况。
- 图片变形处理,可设置CSS属性object-fit: cover完美解决
- javasript两个数组元素分别相加
- JavaScript实现json数据深拷贝的几种方法
- 开源的OA办公系统 — 勾股OA4.09.10 发布
- 谷歌发布Flutter 3,增加对macOS和Linux 应用的支持
- Windows Terminal Preview 1.15 发布
- composer install常见错误解决方案 --ignore-platform-reqs解决版本冲突
- 微软发布首个 Windows 11 ISO 版本 新的浏览器大战又要开始?
- PHP字符串、数组的常见的操作
- 勾股OA系统的进销存管理模块功能说明