VUE中拦截请求并无感知刷新token方式

 更新时间:2024年08月30日 15:51:53   作者:阿泽Kze_  
这篇文章主要介绍了VUE中拦截请求并无感知刷新token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

VUE拦截请求并无感知刷新token

应用场景

前端登录后,后端返回token和token失效时间,当达到特定条件(本文以距离token过期两小时为例),前端需要主动请求token刷新接口去获取一个新的token,做到用户无感知地去刷新token。

思路

拦截请求判断是否达到需要刷新token的条件,符合条件则刷新token并将请求存入一个重试队列中,当token刷新后,执行重试队列中的函数,达到刷新token的效果,

需要注意的是,当多个请求几乎同时进来时,为了避免多次执行token刷新,需要定义一个变量(本文变量名为isRefreshing )进行标记。

import axios from "axios";
import store from "@/store";
import md5 from "js-md5";
import {
  setToken,
  getToken,
  setUid,
  setExpireTime,
  getExpireTime
} from "@/utils/auth";

// 创建axios实例
const service = axios.create({
  // axios中请求配置有baseURL选项,表示请求URL公共部分
  baseURL: window.location.protocol + process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 10000
});

// 是否正在刷新的标记
let isRefreshing = false;

// 重试队列,每一项将是一个待执行的函数形式
let requests = [];

// 判断是否距离过期2个小时
function isRefreshTokenExpired() {
  const expire_time = getExpireTime(); // 到期时间
  const new_time = new Date().getTime(); // 当前时间
  const stamp = expire_time - new_time; // 距离到期时间
  return stamp <= 2 * 60 * 60 * 1000 ? true : false; // 2小时
}

// request拦截器
service.interceptors.request.use(
  config => {
    const tokenObj = getToken();
    if (config.data.method === "xxxx") { //当请求的接口为token刷新接口时
      return config;
    }
    if (tokenObj && isRefreshTokenExpired()) {
      // 立即刷新token
      if (!isRefreshing) {
        isRefreshing = true;
        // 请求token刷新接口
        store
          .dispatch("RefeshToken")
          .then(res => {
            const token = res.data.token;
            const time = res.data.expire_time.replace(/-/g, "/");
            const expire_time = new Date(time);
            setToken(token, expire_time);
            setExpireTime(new Date(res.data.expire_time).getTime(), expire_time);
            setUid(res.data.uid, expire_time);
            isRefreshing = false;
            return token;
          })
          .then(token => {
            requests.forEach(cb => cb(token));
            // 执行完成后,清空队列
            requests = [];
          })
          .catch(res => {
            console.error("refresh token error: ", res);
          });
      }
      const retryOriginalRequest = new Promise(resolve => {
        requests.push(token => {
          // 因为config中的token是旧的,所以刷新token后要将新token传进来
          config.headers["ContentToken"] = token;
          resolve(config);
        });
      });
      return retryOriginalRequest;
    }
    return config;
  },
  error => {
    Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  res => {
    if (res.status === 200) {
    	return res
    }
  },
  error => {
   	console.log('catch', error)
  	return Promise.reject(error)
  }
);

export default service;

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 如何在vue单页中重复引入同一子组件

    如何在vue单页中重复引入同一子组件

    这篇文章主要介绍了如何在vue单页中重复引入同一子组件问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue中使用$http.post请求传参的错误及解决

    vue中使用$http.post请求传参的错误及解决

    这篇文章主要介绍了vue中使用$http.post请求传参的错误及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue.js中v-show和v-if指令的用法介绍

    Vue.js中v-show和v-if指令的用法介绍

    这篇文章介绍了Vue.js中v-show和v-if指令的用法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • vue2.0 computed 计算list循环后累加值的实例

    vue2.0 computed 计算list循环后累加值的实例

    下面小编就为大家分享一篇vue2.0 computed 计算list循环后累加值的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现多栏布局拖拽

    vue实现多栏布局拖拽

    这篇文章主要为大家详细介绍了vue实现多栏布局拖拽,改变盒子的宽度,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • VUE中使用滚动组件-vueSeamlessScroll

    VUE中使用滚动组件-vueSeamlessScroll

    这篇文章主要介绍了VUE中使用滚动组件-vueSeamlessScroll,需要的朋友可以参考下
    2023-10-10
  • vue中设置滚动条方式

    vue中设置滚动条方式

    这篇文章主要介绍了在vue中设置滚动条的方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 在vue2项目中使用dart-sass的问题及解决方法

    在vue2项目中使用dart-sass的问题及解决方法

    在Vue2项目中,使用dart-sass替代node-sass可以解决安装困难和环境兼容问题,VueCLI3+用户可直接使用,而VueCLI2用户需升级VueCLI和项目,具体方法包括修改package.json依赖并使用.scss文件编写样式,此更改有助于提升项目的开发效率和跨平台兼容性
    2024-09-09
  • Vue不能检测到数据变化的几种情况说明

    Vue不能检测到数据变化的几种情况说明

    这篇文章主要介绍了Vue不能检测到数据变化的几种情况说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue项目打包(build)时,自动打以时间命名的压缩包方式

    Vue项目打包(build)时,自动打以时间命名的压缩包方式

    这篇文章主要介绍了Vue项目打包(build)时,自动打以时间命名的压缩包方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论