使用refresh_token实现无感刷新页面


Posted in Javascript onApril 26, 2022

步骤如下:

1-token过期根据refresh_token获取新的token 重新获取数据

2-创建一个新的axios实例 【使用request防止再次进入请求拦截和请求响应而进入死循环】

3-根据请求相应的响应值 是不是401 是:说明token过期

然后进行判断store中的 user :{token:'*',refresh_token:'**'}中的 refresh_token和user对象是否存在 ,如果不存在说明之前没有登录过,直接去登录

4-使用新创建的axios 实例对象 requestFreshToken 发送新的请求 headers中的口令携带的是 refresh_token

5-获取token之后 将值重新赋值给user中的token

6-将user重新存入store中

7-重新获取刚才因为token失效而没有获取的数据 直接使用request 参数 来自error对象中【这里保存了之前token失效的请求数据】

具体实现

代码如下:

import axios from "axios";

import store from "@/store";
import router from "@/router";

import jsonBig from "json-bigint";

import { Toast } from "vant";

// var json = '{ "value" : 9223372036854775807, "v2": 123 }'
// // console.log(JSON.parse(json),777888);
// console.log(jsonBig.parse(json).value.toString(),88888);

const request = axios.create({
  //  所有相应的数据就不会存在大数字问题了
  transformResponse: [
    function(data) {
      try {
        // 如果转换成功则返回转换的数据结果
        return jsonBig.parse(data);
      } catch (err) {
        // 如果转换失败,则包装为统一数据格式并返回
        return {
          data
        };
      }
    }
  ]

  //baseURL: "http://toutiao-app.itheima.net"
});

//  创建一个新的axios实例对象  这样做的目的就是 不会进入之前的请求拦截和响应 防止进入死循环
const requestFreshToken = axios.create();

// 添加请求拦截器
request.interceptors.request.use(
  function(config) {
    // 在发送请求之前做些什么
    //console.log(config, 9999);
    // if (window.localStorage.getItem('SET_TOKEN')) {
    //     config.headers.Authorization = 'Bearer ' + JSON.parse(window.localStorage.getItem('SET_TOKEN')).token
    // }

    if (store.state.user) {
      config.headers.Authorization = "Bearer " + store.state.user.token;
    }
    return config;
  },
  function(error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
request.interceptors.response.use(
  function(response) {
    console.log(response, 3);

    return response;
  },
  async function(error) {
    console.log(error.response, 222);
    // 对响应错误做点什么
    // 对响应数据做点什么
    const status = error.response.status;
    if (status == 400) {
      //  请求参数错误
      Toast.file("请求参数错误");
    } else if (status == 401) {
      // 用户认证失败  若传递token,但token过期,则返回401

      /* 
				token过期 根据refresh-token获取新的token  
				1-发送请求 获取新的token
				2-根据新的token重新发送请求 实现无感刷新
			
			 */
      const { user } = store.state;
      if (!user || !user.refresh_token) {
        // 完全没有登陆过  无token
        return router.push("/login");
      }
      // 有token 但是 token过期
      try {
        //  根据 refresh_token  获取新的token
        const { data } = await requestFreshToken({
          method: "PUT",
          url: "/v1_0/authorizations",
          headers: {
            Authorization: "Bearer " + user.refresh_token
          }
        });
        // 重新对user中token进行赋值
        user.token = data.data.token;
        // 将新的user对象重新存到store中
        store.commit("setUser", user);
        //  这里重新发送请求后  使用的是request  又会走上面的请求拦截  又会重新携带刚刚存的新的token
        return request(error.response.config);
      } catch (error) {}
      //  捕获异常就直接重新登陆
      return router.push("/login");

      Toast.file("用户认证失败");
    } else if (status == 403) {
      // 客户端没有权限
      Toast.file("客户端没有权限");
    } else if (status == 405) {
      //  请求方法不支持
      Toast.file("请求方法不支持");
    }
    return Promise.reject(error);
  }
);

export default request;

到此这篇关于React如何使用refresh_token实现无感刷新页面的文章就介绍到这了!


Tags in this post...

Javascript 相关文章推荐
一个基于jquery的文本框记数器
Sep 19 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
JavaScript对Cookie进行读写操作实例
Jul 25 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
BootStrap tooltip提示框使用小结
Oct 26 Javascript
javascript九宫格图片随机打乱位置的实现方法
Mar 15 Javascript
vue实例中data使用return包裹的方法
Aug 27 Javascript
JS数组Object.keys()方法的使用示例
Jun 05 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
Vue全局事件总线你了解吗
Feb 24 Vue.js
如何vue使用el-table遍历循环表头和表体数据
详细介绍Next.js脚手架完整搭建封装
Apr 26 #Javascript
vue 把二维或多维数组转一维数组
Apr 24 #Vue.js
Vue OpenLayer 为地图绘制风场效果
Apr 24 #Vue.js
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
vue @click.native 绑定原生点击事件
Apr 22 #Vue.js
vue实现省市区联动 element-china-area-data插件
You might like
解析Extjs与php数据交互(增删查改)
2013/06/25 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
在视频前插入广告
2006/11/20 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
javascript数组详解
2014/10/22 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
bootstrap flask登录页面编写实例
2016/11/01 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
2017/02/19 Javascript
JavaScript 中的 this 工作原理
2018/06/20 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
微信小程序form表单组件示例代码
2018/07/15 Javascript
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
2018/07/25 jQuery
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
Angular2实现的秒表及改良版示例
2019/05/10 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
Python os模块中的isfile()和isdir()函数均返回false问题解决方法
2015/02/04 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
Python如何用wx模块创建文本编辑器
2020/06/07 Python
Python dict的常用方法示例代码
2020/06/23 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
《美丽的小兴安岭》教学反思
2014/02/26 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
成品仓管员岗位职责
2015/04/01 职场文书
2015年财务科工作总结范文
2015/05/13 职场文书
职场:企业印章管理制度(模板)
2019/10/18 职场文书
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android
win10输入法不见了只能打出字母怎么解决?
2022/08/05 数码科技