使用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 相关文章推荐
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 Javascript
node.js cookie-parser 中间件介绍
Jun 06 Javascript
jQuery layui常用方法介绍
Jul 25 Javascript
js 获取范围内的随机数实例代码
Aug 02 Javascript
Node连接mysql数据库方法介绍
Feb 07 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
vue+element实现表单校验功能
May 20 Javascript
输入框跟随文字内容适配宽实现示例
Aug 14 Javascript
如何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
基于Zend的Config机制的应用分析
2013/05/02 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
浅谈PHP的反射API
2017/02/26 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
JavaScript实现复制或剪切内容到剪贴板功能的方法
2016/05/23 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
详解Vue组件之间的数据通信实例
2017/06/17 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
基于zTree树形菜单的使用实例
2017/12/25 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
2018/03/12 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
vue在手机中通过本机IP地址访问webApp的方法
2018/08/15 Javascript
d3绘制基本的柱形图的实现代码
2018/12/12 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
2019/01/10 Javascript
React 父子组件通信的实现方法
2019/12/05 Javascript
JS实现简易图片自动轮播
2020/10/16 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
详解Python多线程Selenium跨浏览器测试
2017/04/01 Python
神经网络python源码分享
2017/12/15 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Python通过TensorFlow卷积神经网络实现猫狗识别
2019/03/14 Python
Python获取数据库数据并保存在excel表格中的方法
2019/06/12 Python
Ubuntu18.04下python版本完美切换的解决方法
2019/06/14 Python
python每5分钟从kafka中提取数据的例子
2019/12/23 Python
将tf.batch_matmul替换成tf.matmul的实现
2020/06/18 Python
Html5页面内使用JSON动画的实现
2019/01/29 HTML / CSS
什么是设计模式
2012/06/17 面试题
学生社团文化节开幕式主持词
2014/03/28 职场文书
2014年扶贫工作总结
2014/11/18 职场文书
先进典型发言材料
2014/12/30 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android