请求时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 相关文章推荐
ASP.NET jQuery 实例17 通过使用jQuery validation插件校验ListBox
Feb 03 Javascript
jQuery AJAX实现调用页面后台方法和web服务定义的方法分享
Mar 01 Javascript
Extjs4中的分页应用结合前后台
Dec 13 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
jquery验证手机号是否正确实例讲解
Nov 17 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
jacascript DOM节点——元素节点、属性节点、文本节点
Apr 18 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
May 08 jQuery
JS FormData上传文件的设置方法
Jul 05 Javascript
Angularjs 1.3 中的$parse实例代码
Sep 14 Javascript
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
js中let能否完全替代IIFE
Jun 15 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
PHP的一个基础知识 表单提交
2011/07/04 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
Laravel框架集合用法实例浅析
2020/05/14 PHP
用javascript实现给出的盒子的序列是否可连为一矩型
2007/08/30 Javascript
document.getElementById为空或不是对象的解决方法
2010/01/24 Javascript
一个可绑定数据源的jQuery数据表格插件
2010/07/17 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
jquery.ajax的url中传递中文乱码问题的解决方法
2014/02/07 Javascript
javascript插件开发的一些感想和心得
2016/02/28 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
vue.js语法及常用指令
2017/10/29 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
vue-router两种模式区别及使用注意事项详解
2019/08/01 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
2020/04/15 Javascript
解决vue+elementui项目打包后样式变化问题
2020/08/03 Javascript
利用JS判断元素是否为数组的方法示例
2021/01/08 Javascript
两个使用Python脚本操作文件的小示例分享
2015/08/27 Python
matplotlib设置legend图例代码示例
2017/12/19 Python
django中send_mail功能实现详解
2018/02/06 Python
python实现微信远程控制电脑
2018/02/22 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
详解基于python的全局与局部序列比对的实现(DNA)
2020/10/07 Python
Hertz荷兰:荷兰和全球租车
2018/01/07 全球购物
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
如何将整数int转换成字串String
2014/03/21 面试题
大学自荐信
2013/12/12 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
县委常委班子专题民主生活会查摆问题及整改措施
2014/09/27 职场文书
干部作风建设个人剖析材料
2014/10/11 职场文书
学校党的群众路线教育实践活动整改措施
2014/10/25 职场文书
实习推荐信格式模板
2015/03/27 职场文书
MySQL系列之三 基础篇
2021/07/02 MySQL
Canvas如何做个雪花屏版404的实现
2021/09/25 HTML / CSS