封装axios 到文件 request.js

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;