关于匿名令牌，刷新令牌的全局拦截处理方法

为了让出现401的接口自动重新进行请求，思路：就是拿着报错的接口的url以及内部的参数，进行重新请求。

1、拿到报错的接口链接和参数

2、把它们存到一个数组里面

3、然后按着数组里面的参数进行一一请求报错的接口

import axios from "axios";
import Cookies from "cookies-js";

let isAlreadyFetchingAccessToken = false;
let subscribers = [];//这里是收集报错的接口地址

function onAccessTokenFetched(access_token) {//利用过滤接口的callback进行回调请求接口
    subscribers = subscribers.filter(callback => callback(access_token))
}

function addSubscriber(callback) {//
    subscribers.push(callback)
}

在搜集完成报错的链接可和请求参数时，这是就开始进行再拦截里面对其进行操作

let instance = axios.create({
    baseURL: 'https://***.******.com', // api接口base_url
    timeout: 1000000 
});
let no_token = axios.create({
    baseURL: 'https://***.******.com', // api接口base_url
    timeout: 1000000 
});

instance.interceptors.response.use(response => response,
    error => {
        const {config, response: {status}} = error;
        const originalRequest = config;

        if (status === 401||status === 403) {
            if (!isAlreadyFetchingAccessToken) {
                isAlreadyFetchingAccessToken = true;
                if (Cookies.get("refresh_token")) {
                    no_token.post("请求刷新令牌的接口地址", {refresh_token: Cookies.get("refresh_token")}, formDataConfig)
                        .then(res => {
                            let refresh = res.data;
                            Cookies.set("access_token", refresh.access_token);
                            Cookies.set("refresh_token", refresh.refresh_token);
                            Cookies.set("salt", refresh.salt);
                            return {token:refresh.access_token,salt:refresh.salt};
                        })
                        .then(access_token => {
                            isAlreadyFetchingAccessToken = false;
                            onAccessTokenFetched(access_token);
                        }).catch(er => {
                            return Promise.reject(er)
                        }
                    )
                } else {
                    no_token.post("请求匿名令牌的接口").then(res => {
                        let refresh=res.data;
                        Cookies.expire("refresh_token");
                        Cookies.set("access_token", refresh.access_token);
                        Cookies.set("salt", refresh.salt);
                        return {token:refresh.access_token,salt:refresh.salt};
                    }).then(access_token => {
                        isAlreadyFetchingAccessToken = false;
                        onAccessTokenFetched(access_token);
                    }).catch(er => {
                            return Promise.reject(er)
                        }
                    )
                }
            }

            const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(access_token => {
                    originalRequest.headers.Authorization = 'Bearer ' + access_token.token;
                    originalRequest.headers.salt = access_token.salt;
                    resolve(axios(originalRequest))
                })
            });
            return retryOriginalRequest
        }
        return Promise.reject(error)
    }
);

完整代码如下

import axios from "axios";
import Cookies from "cookies-js";

let isAlreadyFetchingAccessToken = false;
let subscribers = [];

function onAccessTokenFetched(access_token) {
    subscribers = subscribers.filter(callback => callback(access_token))
}

function addSubscriber(callback) {
    subscribers.push(callback)
}

let formDataConfig = {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}
let instance = axios.create({
    baseURL: 'https://***.******.***', // api接口base_url
    timeout: 1000000 
});
let no_token = axios.create({
    baseURL: 'https://***.******.***', // api接口base_url
    timeout: 1000000 
});
instance.interceptors.request.use(config => {
        if (Cookies.get("access_token")) {
            config.headers.Authorization =
                "Bearer" + " " + Cookies.get("access_token");
        }
        if (Cookies.get("salt")) {
            config.headers.salt = Cookies.get("salt");
        }
        config.headers["Content-Type"] = "application/json";
        return config;
    }
);
instance.interceptors.response.use(response => response,
    error => {
        const {config, response: {status}} = error;
        const originalRequest = config;

        if (status === 401||status === 403) {
            if (!isAlreadyFetchingAccessToken) {
                isAlreadyFetchingAccessToken = true;
                if (Cookies.get("refresh_token")) {
                    no_token.post("请求刷新令牌的借口", {refresh_token: Cookies.get("refresh_token")}, formDataConfig)
                        .then(res => {
                            let refresh = res.data;
                            Cookies.set("access_token", refresh.access_token);
                            Cookies.set("refresh_token", refresh.refresh_token);
                            Cookies.set("salt", refresh.salt);
                            return {token:refresh.access_token,salt:refresh.salt};
                        })
                        .then(access_token => {
                            isAlreadyFetchingAccessToken = false;
                            onAccessTokenFetched(access_token);
                        }).catch(er => {
                            return Promise.reject(er)
                        }
                    )
                } else {
                    no_token.post("请求匿名令牌的接口").then(res => {
                        let refresh=res.data;
                        Cookies.expire("refresh_token");
                        Cookies.set("access_token", refresh.access_token);
                        Cookies.set("salt", refresh.salt);
                        return {token:refresh.access_token,salt:refresh.salt};
                    }).then(access_token => {
                        isAlreadyFetchingAccessToken = false;
                        onAccessTokenFetched(access_token);
                    }).catch(er => {
                            return Promise.reject(er)
                        }
                    )
                }
            }

            const retryOriginalRequest = new Promise((resolve) => {
                addSubscriber(access_token => {
                    originalRequest.headers.Authorization = 'Bearer ' + access_token.token;
                    originalRequest.headers.salt = access_token.salt;
                    resolve(axios(originalRequest))
                })
            });
            return retryOriginalRequest
        }
        return Promise.reject(error)
    }
);