使用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 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
Feb 13 Javascript
JavaScript中数组成员的添加、删除介绍
Dec 30 Javascript
在JavaScript应用中使用RequireJS来实现延迟加载
Jul 01 Javascript
jQuery计算文本框字数及限制文本框字数的方法
Mar 01 Javascript
实例讲解JavaScript中instanceof运算符的用法
Jun 08 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
JavaScript中String对象的方法介绍
Jan 04 Javascript
VUE实现日历组件功能
Mar 13 Javascript
zTree实现节点修改的实时刷新功能
Mar 20 Javascript
微信小程序实现随机验证码功能
Dec 20 Javascript
vue中实现上传文件给后台实例详解
Aug 22 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
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
新浪微博API开发简介之用户授权(PHP基础篇)
2011/09/25 PHP
php全排列递归算法代码
2012/10/09 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
向大师们学习Javascript(视频与PPT)
2009/12/27 Javascript
js 数组克隆方法 小结
2010/03/20 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
JavaScript实现Iterator模式实例分析
2015/06/09 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
[46:16]2018DOTA2亚洲邀请赛3月30日 小组赛B组 iG VS VP
2018/03/31 DOTA
[01:54]TI珍贵瞬间系列(三):翻盘
2020/08/28 DOTA
python下MySQLdb用法实例分析
2015/06/08 Python
Python中matplotlib中文乱码解决办法
2017/05/12 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
Java ExcutorService优雅关闭方式解析
2020/05/30 Python
利用python3筛选excel中特定的行(行值满足某个条件/行值属于某个集合)
2020/09/04 Python
python将下载到本地m3u8视频合成MP4的代码详解
2020/11/24 Python
土耳其家居建材网站:Koçtaş
2016/11/22 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
抗震救灾标语
2014/06/26 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
检讨书范文300字
2015/01/28 职场文书
培训班通知
2015/04/25 职场文书
运动会加油稿30字
2015/07/21 职场文书
python flask开发的简单基金查询工具
2021/06/02 Python
浅析JavaScript中的变量提升
2022/06/01 Javascript
CSS浮动引起的高度塌陷问题
2022/08/05 HTML / CSS