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拦截请求并无感知刷新token的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。