本篇文章给大家分享的是关于vue中token如何进行刷新处理，内容很不错，有需要的朋友可以参考一下，希望可以帮助到大家。
token身份验证机制
客户端登录请求成功后，服务器将用户信息（如用户id）使用特殊算法加密后作为验证的标志发送给用户（即token），当用户下次发起请求时，会将这个token捎带过来，服务器再将这个token通过解密后进行验证，通过的话，则向客户端返回请求的数据；反之，则请求失败。
token优点
它是无状态的，且服务器不用像传统的身份认证（session）那样需要保存会话信息，减轻了服务器的压力。
vue的token刷新处理
在对token身份验证机制进行一次简单介绍后，进入正文...
一般为了安全性，token都会设置一个过期时间，在过期之后就无法请求相关接口了，这时应该怎么办呢，是直接退出登录吗？
在目前公司的项目里，为了更好的用户体验，我们选择手动刷新token。登录请求成功后，会返回一个token和token过期时间，在每次请求api时，前端可以先判断一下token是否即将过期或已过期，如果是，则请求刷新token的接口，成功替换原来的token之后才可以重新发起请求。
下面，我们直接看代码，这是在vue的请求拦截器里进行的相关操作：
/*是否有请求正在刷新token*/window.isrefreshing = false/*被挂起的请求数组*/let refreshsubscribers = []/*获取刷新token请求的token*/function getrefreshtoken () { return json.parse(localstorage.auth).refresh_token}/*push所有请求到数组中*/function subscribetokenrefresh (cb) { refreshsubscribers.push(cb)}/*刷新请求（refreshsubscribers数组中的请求得到新的token之后会自执行，用新的token去请求数据）*/function onrrefreshed (token) { refreshsubscribers.map(cb => cb(token))}/*请求拦截器*/ajax.interceptors.request.use( config => { const authtmp = localstorage.auth /*判断是否已登录*/ if (authtmp) { /*解析登录信息*/ let auth = json.parse(authtmp) /*判断auth是否存在*/ if (auth) { /*在请求头中添加token类型、token*/ config.headers.authorization = auth.token_type + ' ' + auth.token /*判断刷新token请求的refresh_token是否过期*/ if (util.isrefreshtokenexpired()) { alert('刷新token过期，请重新登录') /*清除本地保存的auth*/ localstorage.removeitem('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的请求*/ apilist.refreshtoken({refresh_token: getrefreshtoken()}).then(res => { /*将标志置为false*/ window.isrefreshing = false /*成功刷新token*/ config.headers.authorization = res.data.data.token_type + ' ' + res.data.data.token /*更新auth*/ localstorage.setitem('auth', json.stringify(res.data.data)) /*执行数组里的函数,重新发起被挂起的请求*/ onrrefreshed(res.data.data.token) /*执行onrefreshed函数后清空数组中保存的请求*/ refreshsubscribers = [] }).catch(err => { alert(err.response.data.message) /*清除本地保存的auth*/ // localstorage.removeitem('auth') window.location.href = '#/login' }) } /*把请求(token)=>{....}都push到一个数组中*/ let retry = new promise((resolve, reject) => { /*(token) => {...}这个函数就是回调函数*/ subscribetokenrefresh((token) => { config.headers.authorization = 'bearer ' + token /*将请求挂起*/ resolve(config) }) }) return retry } } return config } else { /*未登录直接返回配置信息*/ return config } }, /*错误操作*/ err => { return promise.reject(err) })
这里需要注意几点：
1、当token即将过期或者已过期时，原则上，我们只需要有一个接口去触发刷新token的请求即可，这里的isrefreshing 变量，就起到这样一个监控的作用，它相当于一把锁，当刷新token的操作被触发后，其他的触发操作就被排斥在外了。
window.isrefreshing = false
2、刷新token的接口，用到了一个另外的token（refresh_token），这也是出于安全性考虑的，并且它也有过期时间，不过这个过期时间一般都比普通token的过期时间要长，所以在上面代码中，会发现，我在请求拦截中优先判断了refresh_token是否过期，如果过期则直接退出登录，不再进行下一步的操作。
/*判断刷新token请求的refresh_token是否过期*/if (util.isrefreshtokenexpired() && config.url.indexof('admin/auth/current') === -1) { alert('刷新token过期，请重新登录') /*清除本地保存的auth*/ localstorage.removeitem('auth') window.location.href = '#/login' return}
3、在触发了刷新token的操作后，我们还需要先将其他的请求挂起，在获取新的token之后再重新发起这些请求。
/*把请求(token)=>{....}都push到一个数组中*/let retry = new promise((resolve, reject) => { /*(token) => {...}这个函数就是回调函数*/ subscribetokenrefresh((token) => { config.headers.authorization = 'bearer ' + token /*将请求挂起*/ resolve(config) })})return retry
在刷新token请求的成功回调里执行下面代码，重新发起请求。
/*执行数组里的函数,重新发起被挂起的请求*/ onrrefreshed(res.data.data.token)
4、因为有人在评论里问util文件，应该是想知道具体怎么判断token过期的，其实在获得token时，是有返回一个token过期时间 ，你可以先将它先保存起来，然后在需要时，拿出来与本地时间比较即可
/*判断token是否过期*/function istokenexpired() { /*从localstorage中取出token过期时间*/ let expiredtime = new date(json.parse(localstorage.auth).expired_at).gettime() / 1000 /*获取本地时间*/ let nowtime = new date().gettime() / 1000 /*获取校验时间差*/ let difftime = json.parse(sessionstorage.difftime) /*校验本地时间*/ nowtime -= difftime /*如果 < 10分钟，则说明即将过期*/ return (expiredtime - nowtime) < 10*60}
相关推荐：
vue中sfc和vue-loader的具体分析
vue父子组件之间是如何进行传值的
以上就是vue中token如何进行刷新处理的详细内容。