请求时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 相关文章推荐
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
一些主流JS框架中DOMReady事件的实现小结
Feb 12 Javascript
js 获取时间间隔实现代码
May 12 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
超级给力的JavaScript的React框架入门教程
Jul 02 Javascript
jqueryMobile使用示例分享
Jan 12 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
Feb 25 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
Bootstrap中data-target 到底是什么
Feb 14 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
详解Node使用Puppeteer完成一次复杂的爬虫
Apr 18 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重新实现PHP脚本引擎内置函数
2007/03/06 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
基于php-fpm的配置详解
2013/06/03 PHP
php无限遍历目录示例
2014/02/21 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP使用file_get_content设置头信息的方法
2016/02/14 PHP
Yii2前后台分离及migrate使用(七)
2016/05/04 PHP
Jquery中dialog属性小记
2010/09/03 Javascript
Javascript 垃圾收集机制介绍理解
2013/05/14 Javascript
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
使用Bootstrap和Vue实现用户信息的编辑删除功能
2017/10/25 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
python实现快速排序的示例(二分法思想)
2018/03/12 Python
python解决pandas处理缺失值为空字符串的问题
2018/04/08 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python中比较两个列表的实例方法
2019/07/04 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
Python3安装pip工具的详细步骤
2019/10/14 Python
WxPython实现无边框界面
2019/11/18 Python
Python3运算符常见用法分析
2020/02/14 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
html5理解head_动力节点Java学院整理
2017/07/13 HTML / CSS
软件测试工程师笔试题带答案
2015/03/27 面试题
2014升学宴答谢词
2014/01/26 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
工作保证书怎么写
2015/02/28 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
html+css 实现简易导航栏功能
2021/04/07 HTML / CSS
关于Javascript闭包与应用的详解
2021/04/22 Javascript
django上传文件的三种方式
2021/04/29 Python
默认网关不可用修复后过一会又不好使了解决方法
2022/04/08 数码科技
vue使用element-ui按需引入
2022/05/20 Vue.js