请求时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中去掉数组中的重复值的实现方法
Aug 03 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
Feb 25 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
jQuery设置Easyui校验规则(推荐)
Nov 21 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 Javascript
详解webpack模块化管理和打包工具
Apr 21 Javascript
了解前端理论:rscss和rsjs
May 23 Javascript
聊聊鉴权那些事(推荐)
Aug 22 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
vue项目初始化到登录login页面的示例
Oct 31 Javascript
JavaScript 严格模式(use strict)用法实例分析
Mar 04 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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP+jQuery 注册模块开发详解
2014/10/14 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
写的htc的数据表格
2007/01/20 Javascript
javascript动态加载三
2012/08/22 Javascript
jquery怎样实现ajax联动框(二)
2013/03/08 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
jquery加载图片时以淡入方式显示的方法
2015/01/14 Javascript
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
发布一款npm包帮助理解npm的使用
2019/01/03 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
Python使用Django实现博客系统完整版
2020/09/29 Python
Python爬虫包BeautifulSoup异常处理(二)
2018/06/17 Python
Python Opencv实现图像轮廓识别功能
2020/03/23 Python
python中append实例用法总结
2019/07/30 Python
浅谈python3打包与拆包在函数的应用详解
2020/05/02 Python
python3.4中清屏的处理方法
2020/07/06 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
2014/04/14 HTML / CSS
Corelle官方网站:购买康宁餐具
2016/11/02 全球购物
电大自我鉴定范文
2013/10/01 职场文书
员工试用期考核自我鉴定
2014/04/13 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
2015年加油站工作总结
2015/05/13 职场文书
python爬取网页版QQ空间,生成各类图表
2021/06/02 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python