通过接口无痛刷新token

ts最简单的封装
import axios, {AxiosInstance, AxiosError, AxiosResponse, AxiosRequestConfig} from 'axios';

const service:AxiosInstance = axios.create({
    timeout: 5000
});

service.interceptors.request.use(
    (config: AxiosRequestConfig) => {
        return config;
    },
    (error: AxiosError) => {
        console.log(error);
        return Promise.reject();
    }
);

service.interceptors.response.use(
    (response: AxiosResponse) => {
        if (response.status === 200) {
            return response;
        } else {
            Promise.reject();
        }
    },
    (error: AxiosError) => {
        console.log(error);
        return Promise.reject();
    }
);

export default service;

使用

import request from '../utils/request';

export const fetchData = () => {
    return request({
        url: './table.json',
        method: 'get'
    });
};

//无痛刷新第一种方法：

import axios from 'axios'

// 是否正在刷新的标记
let isRefreshing = false
//重试队列
let requests = []
service.interceptors.response.use(
  response => {
  //约定code 409 token 过期
    if (response.data.code === 409) {
      if (!isRefreshing) {
        isRefreshing = true
        //调用刷新token的接口
        return refreshToken({ refreshToken: localStorage.getItem('refreshToken'), token: getToken() }).then(res => {
          const { token } = res.data
          // 替换token
          setToken(token)
          response.headers.Authorization = `${token}`
           // token 刷新后将数组的方法重新执行
          requests.forEach((cb) => cb(token))
          requests = [] // 重新请求完清空
          return service(response.config)
        }).catch(err => {
        //跳到登录页
          removeToken()
          router.push('/login')
          return Promise.reject(err)
        }).finally(() => {
          isRefreshing = false
        })
      } else {
        // 返回未执行 resolve 的 Promise
        return new Promise(resolve => {
          // 用函数形式将 resolve 存入，等待刷新后再执行
          requests.push(token => {
            response.headers.Authorization = `${token}`
            resolve(service(response.config))
          })
        })
      }
    }
    return response && response.data
  },
  (error) => {
    Message.error(error.response.data.msg)
    return Promise.reject(error)
  }
)




//无痛刷新第二种方法：




import axios from 'axios'

// 创建 axios 实例
const service = axios.create({
    // API 请求的默认前缀 （config中设置了代理，这里便不需要再配置）
    baseURL: '/',
    timeout: 3000 // 设置请求超时时间
})



/**
 * 刷新 access_token 的接口
 * 1.保存token
 * 2.重新发起请求
 * @param {*} config 
 * @returns 
 */
const refreshToken = (config) => {
    return service.post('/auth-service/auth-sys/refreshToken',{ refreshToken: localStorage.getItem("refreshToken") }).then(res=>{
        console.log(res)
        localStorage.setItem("accessToken",res)
        config.headers['X-Access-Token'] = localStorage.getItem("accessToken")
        return service(config)
    }).catch(err => {
        console.error(err)
    });
}




//请求拦截器
//在请求发送之前做一些处理
service.interceptors.request.use((config) => {
    config.headers['X-Access-Token'] = localStorage.getItem("accessToken")
    // console.log("请求拦截器，增加headers配置", config.headers)
    return config
}, (error) => {
    // console.log("请求失败:", error)
    return Promise.reject(error)
}
)

service.interceptors.response.use((response) => {
    var res = response.data;
    console.log("响应拦截器", response.data)
    if (res.code == 200) {
        return res.result;
    } else {//服务端返回的异常代码
        //token过期，需要刷新token
        if (res.code === 602) {
            return refreshToken(response.config);
        }
        //票据失效，需要重新登陆
        if (res.code === 603) {
            console.log("票据失效，需要重新登陆")
        }
        return Promise.reject(res)
    }
}, (error) => {
    //接口响应异常时，如404
    console.error(error.code, error.message)
    return Promise.reject(error)//返回请求结果，可在.then.catch中捕捉到
})

export default service