vue的token刷新处理的方法


Posted in Javascript onJuly 17, 2018

第一次接触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
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使用prototype.js进行异步操作
Feb 07 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
JavaScript中的null和undefined区别介绍
Jan 01 Javascript
javascript常用函数(2)
Nov 05 Javascript
Node.js DES加密的简单实现
Jul 07 Javascript
js转html实体的方法
Sep 27 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 Javascript
微信小程序图片选择、上传到服务器、预览(PHP)实现实例
May 11 Javascript
简述ES6新增关键字let与var的区别
Aug 23 Javascript
jQuery实现的移动端图片缩放功能组件示例
May 01 jQuery
vue 权限认证token的实现方法
Jul 17 #Javascript
vue 实现axios拦截、页面跳转和token 验证
Jul 17 #Javascript
详解webpack import()动态加载模块踩坑
Jul 17 #Javascript
vue-router中的hash和history两种模式的区别
Jul 17 #Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
Jul 17 #Javascript
SVG实现时钟效果
Jul 17 #Javascript
JS中实现隐藏部分姓名或者电话号码的代码
Jul 17 #Javascript
You might like
PHILIPS AE3805收音机的分析打磨
2021/03/02 无线电
PHP实现文件上传与下载实例与总结
2016/03/13 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP实现字符串的全排列详解
2019/04/24 PHP
关于JS控制代码暂停的实现方法分享
2012/10/11 Javascript
JS删除数组元素的函数介绍
2013/03/27 Javascript
使用node.js 获取客户端信息代码分享
2014/11/26 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
vue中rem的配置的方法示例
2018/08/30 Javascript
vue-cli 3.0 自定义vue.config.js文件,多页构建的方法
2018/09/19 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
2020/02/04 jQuery
整理 node-sass 安装失败的原因及解决办法(小结)
2020/02/19 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
python 网络编程详解及简单实例
2017/04/25 Python
Python中with及contextlib的用法详解
2017/06/08 Python
对python中list的拷贝与numpy的array的拷贝详解
2019/01/29 Python
win8.1安装Python 2.7版环境图文详解
2019/07/01 Python
Mac安装python3的方法步骤
2019/08/09 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
怎样实现H5+CSS3手指滑动切换图片的示例代码
2019/05/05 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
世界领先的电子书网站:eBooks.com(在线购买小说、非小说和教科书)
2019/03/30 全球购物
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
服务行业口号
2014/06/11 职场文书
党员志愿者服务倡议书
2015/04/29 职场文书
我的中国梦主题教育活动总结
2015/05/07 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
Python 如何将integer转化为罗马数(3999以内)
2021/06/05 Python
Python合并多张图片成PDF
2021/06/09 Python
Java 垃圾回收超详细讲解记忆集和卡表
2022/04/08 Java/Android