reactjs - 在 react-admin 中未经身份验证时，如何防止仪表板内容闪烁？

Question

据一位较早的 comment以及我在我的应用程序中遇到的情况，在重定向到并显示登录对话框之前，react-admin 可能会在短时间内未通过身份验证时显示仪表板。

The AUTH_CHECK call is asynchronous, and the response can come with a long delay. We choose to render the dashboard even though the response from the AUTH_CHECK call hasn't come yet. We've adopted this strategy for performance reasons (it's called optimistic rendering).

但是，他们的演示应用程序设法在短时间内不显示仪表板。它立即显示登录表单。

转至 demo app并使用演示/演示登录

等待仪表板显示

清除本地存储和 cookie

在浏览器控制台 (Chrome) 中降低 CPU x6 和网络速度以降低 3G

点击刷新。您没有看到仪表板，但立即会看到登录对话框

他们在他们的演示应用程序中实现了什么来实现在未经身份验证的情况下短暂地看不到仪表板？因为这也是我想在我的应用程序中完成的。

以下内容可能是一个红鲱鱼，但如果您发现我的 authProvider 配置有问题导致仪表板在我的应用程序中未经身份验证时短暂显示，则会为您加分。

const authProvider = {
    login: ({ username, password }) => {
        return fetchUtils
            .fetchJson(`${uri}/login`, {
                method: 'POST',
                credentials: 'include',
                body: JSON.stringify({ username, password }),
            })
            .then(({ status, body, json }) => {
                if (status < 200 || status >= 300) {
                    throw new Error(body);
                }
                localStorage.setItem('me', JSON.stringify(json));
            });
    },
    logout: () => {
        localStorage.removeItem('me');

        return fetchUtils
            .fetchJson(`${uri}/signout`, {
                method: 'POST',
            })
            .then(() => {
                return Promise.resolve(/*loginUrl*/);
            })
            .catch(err => {
                console.log('Error, while requesting signout', err);
                return Promise.resolve();
            });
    },
    checkError: params => {
        let isAuthError;
        try {
            isAuthError = params.networkError.result.errors.some(
                e => e.extensions.code === 'UNAUTHENTICATED'
            );
        } catch (e) {
            //
        }

        if (isAuthError) {
            localStorage.removeItem('me');
            return Promise.reject();
        }
        return Promise.resolve();
    },
    checkAuth: () => {
        return localStorage.getItem('me')
            ? Promise.resolve()
            : Promise.reject();
    },
    getPermissions: () => {
        const { role } = JSON.parse(localStorage.getItem('me') || '{}');
        return role ? Promise.resolve(role) : Promise.reject();
    },
}

Answer 1

我们没有为此做任何特别的事情。我怀疑这里有些 react 巫毒。

您可能已经看到 dataProvider 初始化是异步的，在初始化之前，我们展示了一个简单的加载器。 也许 资源和路由初始化在 React 将渲染结果应用于 DOM 之前进行，并且重定向优先。