请求时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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
基于KMP算法JavaScript的实现方法分析
May 03 Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
javascript批量修改文件编码格式的方法
Jan 27 Javascript
原生JavaScript实现滚动条效果
Mar 24 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
Angular 输入框实现自定义验证功能
Feb 19 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
详解vue修改elementUI的分页组件视图没更新问题
Nov 13 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
法压式咖啡之制作法
2021/03/03 冲泡冲煮
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
php中的比较运算符详解
2013/10/28 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
2013/04/24 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
jQuery调用WebMethod(PageMethod) NET2.0的方法
2016/04/15 Javascript
Zabbix添加Node.js监控的方法
2016/10/20 Javascript
详解MVC如何使用开源分页插件(shenniu.pager.js)
2016/12/16 Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
2017/01/22 Javascript
AngularJS表单验证功能分析
2017/05/26 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue 项目 iOS WKWebView 加载
2019/04/17 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JavaScript实现随机五位数验证码
2019/09/27 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python3 字符串知识点学习笔记
2020/02/08 Python
python代码如何实现余弦相似性计算
2020/02/09 Python
英国最受欢迎的手表网站:Watch Shop
2016/10/21 全球购物
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
军训自我鉴定
2013/12/14 职场文书
军训自我鉴定怎么写
2014/02/13 职场文书
水利公司纪检监察自我鉴定
2014/02/25 职场文书
《藏戏》教学反思
2016/02/23 职场文书
2019事业单位个人工作总结范文
2019/08/26 职场文书
eclipse创建项目没有dynamic web的解决方法
2021/06/24 Java/Android