日常开发中,关于双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,避免了客户端频繁反复请求的情况。
- 开源的度量分析与可视化套件 Grafana 9正式发布
- axios获取后端返回的二进制验证码图片或者图片对象
- 如何给OA系统加上名字工号的水印?其实很简单,WEB前端就能实现添加水印
- 宝塔Linux面板安装Composer依赖管理工具与PHP依赖包的方法
- thinkphp6 生成Barcode条形码和Qrcode二维码的方法
- Flash已退出历史舞台,未来Web端3D的内容会怎样发展?
- aliplayer播放器,TcPlayer播放器,xgplayer播放器三款大厂的视频直播播放器对比
- 前端开发者必须掌握的数据可视化技术
- 在linux系统对Gitee代码库生成/添加SSH公钥
- 强大的图片查看器插件Viewer.js,开源中国在用的文章图片查看器