请求时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 相关文章推荐
获取URL地址中的文件名和参数的javascript代码
Sep 02 Javascript
jQuery 工具函数学习资料
Apr 29 Javascript
基于jQuery制作迷你背词汇工具
Jul 27 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
BootStrap智能表单demo示例详解
Jun 13 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
Aug 08 Javascript
在web中js实现类似excel的表格控件
Sep 01 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
解决vue跨域axios异步通信问题
Apr 17 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 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
浅析SVN常见问题及解决方法
2013/06/21 PHP
浅析php面向对象public private protected 访问修饰符
2013/06/30 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP图形计数器程序显示网站用户浏览量
2016/07/20 PHP
PHPExcel实现表格导出功能示例【带有多个工作sheet】
2018/06/13 PHP
innerText 使用示例
2014/01/23 Javascript
alert出数组中的随即值代码
2014/09/25 Javascript
javascript实现图片循环渐显播放的方法
2015/02/24 Javascript
jQuery简单操作cookie的插件实例
2016/01/13 Javascript
jQuery插件Validate实现自定义校验结果样式
2016/01/18 Javascript
jquery replace方法去空格
2017/05/08 jQuery
微信小程序request请求后台接口php的实例详解
2017/09/20 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
在Python中调用ggplot的三种方法
2015/04/08 Python
在Python中使用SimpleParse模块进行解析的教程
2015/04/11 Python
Python中Random和Math模块学习笔记
2015/05/18 Python
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
微信跳一跳小游戏python脚本
2018/01/05 Python
Python获取系统所有进程PID及进程名称的方法示例
2018/05/24 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
基于python实现查询ip地址来源
2020/06/02 Python
浅析Python 中的 WSGI 接口和 WSGI 服务的运行
2020/12/09 Python
TripAdvisor西班牙官方网站:全球领先的旅游网站
2018/01/10 全球购物
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
如何高效率的查找一个月以内的数据
2012/04/15 面试题
实习护理工作自我评价
2013/09/25 职场文书
大三自我鉴定范文
2013/10/05 职场文书
活动总结怎么写
2014/04/28 职场文书
爱之链教学反思
2014/04/30 职场文书
2014年班级工作总结范文
2014/12/23 职场文书
前台岗位职责
2015/02/13 职场文书
使用numpy nonzero 找出非0元素
2021/05/14 Python
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android