vue的token刷新处理的方法

更新时间:2023-05-19 21:57:18 阅读: 评论:0

vue的token刷新处理的⽅法
第⼀次接触token处理,初来乍到,说错的地⽅还请各位多多指教。
token⾝份验证机制
客户端登录请求成功后,服务器将⽤户信息(如⽤户id)使⽤特殊算法加密后作为验证的标志发送给⽤户(即token),当⽤户下次发起请求时,会将这个token捎带过来,服务器再将这个token通过解密后进⾏验证,通过的话,则向客户端返回请求的数据;反之,则请求失败。
token优点
一个雨一个亏它是⽆状态的,且服务器不⽤像传统的⾝份认证(ssion)那样需要保存会话信息,减轻了服务器的压⼒。
vue的token刷新处理
在对token⾝份验证机制进⾏⼀次简单介绍后,进⼊正⽂...
⼀般为了安全性,token都会设置⼀个过期时间,在过期之后就⽆法请求相关接⼝了,这时应该怎么办呢,是直接退出登录吗?
在⽬前公司的项⽬⾥,为了更好的⽤户体验,我们选择⼿动刷新token。登录请求成功后,会返回⼀个token和token过期时间,在每次请求api时,前端可以先判断⼀下token是否即将过期或已过期,如果是,则请求刷新token的接⼝,成功替换原来的token之后才可以重新发起请求。
下⾯,我们直接看代码,这是在vue的请求拦截器⾥进⾏的相关操作:
/*是否有请求正在刷新token*/
window.isRefreshing = fal
/*被挂起的请求数组*/
let refreshSubscribers = []
/*获取刷新token请求的token*/
function getRefreshToken () {
return JSON.par(localStorage.auth).refresh_token
}
/*push所有请求到数组中*/
function subscribeTokenRefresh (cb) {
refreshSubscribers.push(cb)
}
/*刷新请求(refreshSubscribers数组中的请求得到新的token之后会⾃执⾏,⽤新的token去请求数据)*/
function onRrefreshed (token) {
refreshSubscribers.map(cb => cb(token))
}
/*请求拦截器*/
quest.u(
config => {
const authTmp = localStorage.auth
幼儿园跳蚤市场/*判断是否已登录*/
if (authTmp) {
/*解析登录信息*/
let auth = JSON.par(authTmp)
/*判断auth是否存在*/
if (auth) {
/*在请求头中添加token类型、token*/
立春作文config.headers.Authorization = ken_type + ' ' + ken
/*判断刷新token请求的refresh_token是否过期*/小洋芋
if (util.isRefreshTokenExpired()) {
alert('刷新token过期,请重新登录')
/*清除本地保存的auth*/
window.location.href = '#/login'
return
}
/*判断token是否将要过期*/
if (util.isTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
/*判断是否正在刷新*/
if (!window.isRefreshing) {
/*将刷新token的标志置为true*/
window.isRefreshing = true
/*发起刷新token的请求*/
/*将标志置为fal*/
window.isRefreshing = fal
/*成功刷新token*/
config.headers.Authorization = res.ken_type + ' ' + res.ken
/*更新auth*/
localStorage.tItem('auth', JSON.stringify(res.data.data))
/*执⾏数组⾥的函数,重新发起被挂起的请求*/
onRrefreshed(res.ken)
/
*执⾏onRefreshed函数后清空数组中保存的请求*/
refreshSubscribers = []
}).catch(err => {
ssage)
/*清除本地保存的auth*/
// veItem('auth')
window.location.href = '#/login'
})
}
/*把请求(token)=>{....}都push到⼀个数组中*/
let retry = new Promi((resolve, reject) => {
/
西瓜疫病*(token) => {...}这个函数就是回调函数*/
subscribeTokenRefresh((token) => {
config.headers.Authorization = 'Bearer ' + token
/*将请求挂起*/
resolve(config)
})
})
return retry
}
}
return config
猿鸣三声泪沾裳} el {
/*未登录直接返回配置信息*/
return config
}
},
/*错误操作*/
err => {
ject(err)
}
)
这⾥需要注意⼏点:
1、当token即将过期或者已过期时,原则上,我们只需要有⼀个接⼝去触发刷新token的请求即可,这⾥的isRefreshing 变量,就起到这样⼀个监控的作⽤,它相当于⼀把锁,当刷新token的操作被触发后,其他的触发操作就被排斥在外了。window.isRefreshing = fal
2、刷新token的接⼝,⽤到了⼀个另外的token(refresh_token),这也是出于安全性考虑的,并且它也有过期时间,不过这个过期时间⼀般都⽐普通token的过期时间要长,所以在上⾯代码中,会发现,我在请求拦截中优先判断了refresh_token是否过期,如果过期则直接退出登录,不再进⾏下⼀步的操作。
/*判断刷新token请求的refresh_token是否过期*/
if (util.isRefreshTokenExpired() && config.url.indexOf('admin/auth/current') === -1) {
alert('刷新token过期,请重新登录')
/*清除本地保存的auth*/
window.location.href = '#/login'
return
}
3、在触发了刷新token的操作后,我们还需要先将其他的请求挂起,在获取新的token之后再重新发起这些请求。
/*把请求(token)=>{....}都push到⼀个数组中*/
let retry = new Promi((resolve, reject) => {
/*(token) => {...}这个函数就是回调函数*/
subscribeTokenRefresh((token) => {
config.headers.Authorization = 'Bearer ' + token
/*将请求挂起*/
resolve(config)
})
年会ppt模板})
return retry
在刷新token请求的成功回调⾥执⾏下⾯代码,重新发起请求。
/*执⾏数组⾥的函数,重新发起被挂起的请求*/
onRrefreshed(res.ken)
4、因为有⼈在评论⾥问util⽂件,应该是想知道具体怎么判断token过期的,其实在获得token时,是有返回⼀个token过期时间,你可以先将它先保存起来,然后在需要时,拿出来与本地时间⽐较即可
/*判断token是否过期*/
function isTokenExpired() {
/*从localStorage中取出token过期时间*/
let expiredTime = new Date(JSON.par(localStorage.auth).expired_at).getTime() / 1000
/*获取本地时间*/
let nowTime = new Date().getTime() / 1000
/*获取校验时间差*/
let diffTime = JSON.par(ssionStorage.diffTime)
/*校验本地时间*/
创业投资网nowTime -= diffTime
/*如果 < 10分钟,则说明即将过期*/
return (expiredTime - nowTime) < 10*60
}
以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

本文发布于:2023-05-19 21:57:18,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/82/699480.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:请求   刷新   判断   登录
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图