React-admin JWT身份验证刷新令牌问题

Question

我想为react-admin实现我自己的authProvider，但是我陷入了困境。我使用Django-Rest-Framework后端和JWT令牌认证系统。我想刷新JWT令牌，如果它在每个请求之前都快到期了。根据文档，在每次API调用之前都会调用authProvider的checkAuth函数，这是事实。我的问题是在我的代码中，它不等待承诺完成，而是使用旧的访问令牌，该令牌生成401，然后重定向到登录页面。任何指导我缺少什么？

import jwt from 'jsonwebtoken';


export default {
    login: async ({ username, password }) => {
        const request = new Request('http://localhost:8000/api/token/', {
            method: 'POST',
            body: JSON.stringify({ username, password }),
            headers: new Headers({ 'Content-Type': 'application/json' }),
        });

        const response = await fetch(request);
        if (response.status < 200 || response.status >= 300) {
            throw new Error(response.statusText);
        }
        const { refresh, access } = await response.json();
        localStorage.setItem("refreshToken", refresh);
        localStorage.setItem("accessToken", access);
    },

    logout: params => {
        console.log("logout");
        localStorage.setItem('accessToken', "");
        localStorage.setItem('refreshToken', "");

        return Promise.resolve();
    },

    checkAuth: (params) => {
        const accessToken = localStorage.getItem('accessToken');
        const refreshToken = localStorage.getItem('refreshToken');

        if (accessToken && refreshToken) {
            console.log(accessToken);
            const { exp } = jwt.decode(accessToken);
            if (exp > (new Date().getTime() / 1000) - 10) {
                return Promise.resolve();
            } else {
                const request = new Request('http://localhost:8000/api/token/refresh/', {
                    method: 'POST',
                    body: JSON.stringify({ "refresh": refreshToken }),
                    headers: new Headers({ 'Content-Type': 'application/json' }),
                });

                const response = fetch(request)
                .then(response => {
                    if (response.status !== 200) {
                        throw new Error(response.statusText);
                    }
                    return response.json();
                })
                .then(({ token }) => {
                    localStorage.setItem('accessToken', token);
                    return Promise.resolve();
                });

                return response;
            }
        }
        return Promise.reject();
    },

    checkError: error => {
        if (error.status === 401 || error.status === 403) {
            return Promise.reject();
        }
        return Promise.resolve();
    },
    getPermissions: params => Promise.resolve(),
}

Answer 1

您可以尝试类似的方法