请求时token过期自动刷新token操作


Posted in Javascript onSeptember 11, 2020

1.在开发过程中,我们都会接触到token,token的作用是什么呢?主要的作用就是为了安全,用户登陆时,服务器会随机生成一个有时效性的token,用户的每一次请求都需要携带上token,证明其请求的合法性,服务器会验证token,只有通过验证才会返回请求结果。

2.当token失效时,现在的网站一般会做两种处理,一种是跳转到登陆页面让用户重新登陆获取新的token,另外一种就是当检测到请求失效时,网站自动去请求新的token,第二种方式在app保持登陆状态上面用得比较多。

3.下面进入主题,我们请求用的是axios,不管用何种请求方式,刷新token的原理都是一样的。

//封装了一个统一的请求函数,这个不是重点

export default function request(url, options) {
  const token = localStorage.getItem('token');
  const defaultOptions = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
    withCredentials: true,
    url: url,
    baseURL: BASE_URL,
  };
  const newOptions = { ...options, ...defaultOptions };
  return axios.request(newOptions)
    .then(checkStatus)
    .catch(error => console.log(error));
}

// 封装了一个检测返回结果的函数,与后台返回状态码code === 1002表示token失效

let isRefreshing = true;
function checkStatus(response) {
 if (response && response.code === 1002) {
  // 刷新token的函数,这需要添加一个开关,防止重复请求
  if(isRefreshing){
    refreshTokenRequst()
  }
  isRefreshing = false;
  // 这个Promise函数很关键
   const retryOriginalRequest = new Promise((resolve) => {
        addSubscriber(()=> {
          resolve(request(url, options))
        })
      });
      return retryOriginalRequest;
 }else{
   return response;
 }
}

// 刷新token的请求函数

function refreshTokenRequst(){
  let data;
  const refreshToken = localStorage.getItem('refreshToken');
  data:{
    authorization: 'YXBwYXBpczpaSWxhQUVJdsferTeweERmR1praHk=',
    refreshToken,
  }
  axios.request({
    baseURL: BASE_URL,
    url:'/app/renewal',
    method: 'POST',
    data,
  }).then((response)=>{
    localStorage.setItem('refreshToken',response.data.refreshToken);
    localStorage.setItem('token',response.data.token);
    onAccessTokenFetched();
    isRefreshing = true;
  });
}

// Promise函数集合

let subscribers = [];
function onAccessTokenFetched() {
  subscribers.forEach((callback)=>{
    callback();
  })
  subscribers = [];
}

function addSubscriber(callback) {
  subscribers.push(callback)
}

总结:

其实token失效,自动刷新token,在页面只有一个请求的时候是比较好处理的,但是如果页面同时有多个请求,并且都会产生token失效,这就需要一些稍微复杂的处理,解决方式主要是用了Promise 函数来进行处理。

每一个token失效的请求都会存到一个Promise函数集合里面,当刷新token的函数执行完毕后,才会批量执行这些Promise函数,返回请求结果。

还有一点要注意一下,这儿设置一个刷新token的开关isRefreshing,这个是非常有必要的,防止重复请求。

以上这篇请求时token过期自动刷新token操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 二维数组
Nov 26 Javascript
学习JavaScript编程语言的8张思维导图分享
Mar 27 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
移动端横屏的JS代码(beta)
May 16 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
微信小程序 开发MAP(地图)实例详解
Jun 27 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 Javascript
详解angular部署到iis出现404解决方案
Aug 14 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
详解React 条件渲染
Jul 08 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 #Javascript
Vue axios获取token临时令牌封装案例
Sep 11 #Javascript
Vue-cli4 配置 element-ui 按需引入操作
Sep 11 #Javascript
vue 子组件和父组件传值的示例
Sep 11 #Javascript
jQuery实现朋友圈查看图片
Sep 11 #jQuery
详解webpack的文件监听实现(热更新)
Sep 11 #Javascript
js代码编写无缝轮播图
Sep 13 #Javascript
You might like
PHP.MVC的模板标签系统(二)
2006/09/05 PHP
PHP 加密/解密函数 dencrypt(动态密文,带压缩功能,支持中文)
2009/01/30 PHP
PHP使用header()输出图片缓存实例
2014/12/09 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
Jquery异步请求数据实例代码
2011/12/28 Javascript
JS弹出层单纯的绝对定位居中示例代码
2014/02/18 Javascript
js实现键盘操作实现div的移动或改变的原理及代码
2014/06/23 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery 判断图片是否加载完成方法汇总
2015/08/10 Javascript
js判断某个字符出现的次数的简单实例
2016/06/03 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
详解如何使用webpack打包JS
2018/06/21 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
使用Python实现BT种子和磁力链接的相互转换
2015/11/09 Python
python文本数据相似度的度量
2018/03/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
英国创新设计文具、卡片和礼品包装网站:Paperchase
2018/07/14 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
介绍一下gcc特性
2012/01/20 面试题
会计自我鉴定
2013/11/02 职场文书
竟聘演讲稿范文
2013/12/31 职场文书
十八大闭幕感言
2014/01/22 职场文书
付款委托书范本
2014/10/05 职场文书
个人公司授权委托书范本
2014/10/12 职场文书
建筑质检员岗位职责
2015/04/08 职场文书
综合办公室岗位职责
2015/04/11 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang