vue的的token刷新处理的方法刷新处理的方法
主要介绍了vue的token刷新处理的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随
小编过来看看吧
第一次接触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
评论0
最新资源