请求时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 相关文章推荐
js拦截alert对话框另类应用
Jan 16 Javascript
jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能
Apr 08 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
js 通用订单代码
Dec 23 Javascript
JavaScript将XML转成JSON的方法
Mar 12 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
原生js实现回复评论功能
Jan 18 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
微信小程序实现天气预报功能
Jul 18 Javascript
JavaScript中如何对多维数组(矩阵)去重的实现
Dec 04 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 Javascript
对vuex中store和$store的区别说明
Jul 24 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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
如何在Web页面上直接打开、编辑、创建Office文档
2007/03/12 Javascript
javascript入门·对象属性方法大总结
2007/10/01 Javascript
JavaScript高级程序设计 事件学习笔记
2011/09/10 Javascript
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
js函数调用的方式
2014/05/06 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JS移动端/H5同时选择多张图片上传并使用canvas压缩图片
2017/06/20 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
使用Dropzone.js上传的示例代码
2017/10/10 Javascript
Vue封装一个简单轻量的上传文件组件的示例
2018/03/21 Javascript
jquery获取select选中值的文本,并赋值给另一个输入框的方法
2018/08/21 jQuery
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[01:56]林书豪DOTA2上海特级锦标赛励志短片
2016/03/05 DOTA
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
python消费kafka数据批量插入到es的方法
2018/12/27 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
Python 列表推导式需要注意的地方
2020/10/23 Python
使用css创建三角形 使用CSS3创建3d四面体原理及代码(html5实践)
2013/01/06 HTML / CSS
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
《放小鸟》教学反思
2014/04/20 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
英语复习计划
2015/01/19 职场文书
《曹冲称象》教学反思
2016/02/20 职场文书
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
使用refresh_token实现无感刷新页面
2022/04/26 Javascript