使用带有访问和刷新令牌的 axios 拦截器

问题描述 投票:0回答:0

不确定我做错了什么,但是我检查 access_token 和 refresh_token 有效性的流程有些问题。我正在使用 Directus 作为我的后端。

我正在尝试的逻辑是

  1. 当access token过期后,再使用refresh token获取新的access token
  2. 当刷新令牌过期时,然后注销用户并在应用程序上显示警报,通知会话已过期。

这是我文件中的内容:

export const getAxiosInstance = (store) => {

const baseURL = process.env.SITE_URL;

const axiosInstance = axios.create({
    baseURL,
})

let isRefreshing = false;
let refreshSubscribers = [];


axiosInstance.interceptors.request.use(
    async (config) => {
        const {token} = store.getState().auth;
        if (token) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
        // IF TOKEN IS VALID, RETURN
        return config;
    },
    (error) => {return Promise.reject(error);}
);

axiosInstance.interceptors.response.use(
    (response) => {
        console.log("token valid")
        return response;
    },

    async (error) => {
        const {refreshToken} = store.getState().auth;

        const originalRequest = error.config;

        console.log("ERROR", error)

        if (error.response.status === 401 && !originalRequest._retry) {
            if (isRefreshing) {
                console.log("REFRESHING TOKENS")
                try {
                    const token = await new Promise((resolve) => {
                        refreshSubscribers.push((token) => {
                            resolve(token);
                        });
                    });

                    originalRequest.headers['Authorization'] = `Bearer ${token}`;
                    return axiosInstance(originalRequest);
                } catch (err) {
                    return Promise.reject(err);
                }
            }

            originalRequest._retry = true;
            isRefreshing = true;

            try {
                const data = {
                    refresh_token: refreshToken,
                    mode: "json"
                }
                const response = await axios.post(`${process.env.SITE_URL}/auth/refresh`, data);
                const newTokens = response.data.data;
                console.log(newTokens)
                store.dispatch(generateNewTokens(newTokens));

                originalRequest.headers['Authorization'] = `Bearer ${newTokens.access_token}`;

                refreshSubscribers.forEach((callback) => callback(newTokens.access_token));
                refreshSubscribers = [];

                return axiosInstance(originalRequest);
            } catch (err) {
                refreshSubscribers = [];
                console.log("error getting new tokens!")
                Alert.alert("Logged out", "Your session has expired, please log in again")
                store.dispatch(authLogout())
                return Promise.reject(err);
            } finally {
                isRefreshing = false;
            }
        }
        store.dispatch(authLogout());
        return Promise.reject(error);
    }
);

return axiosInstance;

}

reactjs react-native axios interceptor directus
© www.soinside.com 2019 - 2024. All rights reserved.