token 失效分为主动失效和被动失效

主动失效

就是自己设置函数检查token是否失效了，

主要步骤 ；1

　　1.在登录的时候记录存储token的时间，

　　2. 在request文件，设置一个函数，用来检查token是否过期

　　3. 在请求拦截器记录当前的时间，并且引用函数主动检查token是否过期 ；

代码：

import axios from "axios";
import { Message } from "element-ui";
// 拿token有2种方式：方式1: 读取vuex的state; 方式2：读取cookie
import store from "@/store";
import router from "@/router";
import { getLoginTime } from "@/utils/auth";
// 主动检查token过期的方法
const tokenLongTime = 1000 * 60 * 60 * 2;
// const tokenLongTime = 1000 * 5;
function checkTimeOut() {
  let curTime = Date.now(); // 发生请求的时间
  let loginTime = getLoginTime(); // 登录当时的时间
  if (curTime - loginTime > tokenLongTime) {
    return true; // 过期了
  } else {
    return false; // 没有过期
  }
}

// 创建了一个新的axios实例
const service = axios.create({
  // 读取环境变量文件里面的VUE_APP_BASE_API作为基准地址
  baseURL: process.env.VUE_APP_BASE_API, // 接口基准地址
  timeout: 5000, // 超时时间
});

// 请求拦截器
service.interceptors.request.use(
  (config) => {
    // 一定要return config，否则请求发生不出去
    if (store.getters.token) {
      // 有token，才判断是否过期
      if (checkTimeOut()) {
        Message.error("token过期，请重新登录");
        store.dispatch("user/quitAction");
        router.push("/login");
        return Promise.reject("token过期，请重新登录");
      }
      // 没有过期就携带上
      config.headers.Authorization = "Bearer " + store.getters.token;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器 【解构数据，集中的错误处理，token过期】
service.interceptors.response.use(
  (response) => {
    // 一定要return，否则请求方法那边拿不到数据
    const { success, code, data, message } = response.data;
    if (success) {
      // 业务成功
      return data;
    } else {
      // 业务失败
      Message.error(message);
      return Promise.reject(message);
    }
  },
  (error) => {
    console.log("请求错误");
    if (
      error.response &&
      error.response.data &&
      error.response.data.code === 10002
    ) {
      // token过期了
      store.dispatch("user/quitAction");
      router.push("/login");
      Message.error("token过期，请求重新登录");
    } else {
      Message.error("请求异常");
    }
    // 请求错误
    return Promise.reject(error);
  }
);
// 暴露
export default service;

被动失效

就是让后端返回给我们数据，比如返回 401 就是token 过期 ，我们在响应拦截器做tokne过期的对应处理 ；

我这边采取的是被动失效，主要是后端失效之后会返回前端⼀个401的状态码，我们可以在axios的响应 拦截器⾥，去获取这个状态，如果发现是401就清理⼀下过去的token，然后重新跳转到登录⻚，获取有 效token，还有一个逻辑不是去跳转登录页，而是使用长refresh_token去获获取更新 token 然后把token 保存的vuex ，接着重新拿着新的config 配置项信息请i去数据，如果 refresh_token页过期了，就重新登录 ；

具体的代码：

https://www.cnblogs.com/zhulongxu/p/16810541.html