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

Question

根据较旧的评论以及我在应用程序中遇到的情况，react-admin 可能会在重定向到并显示登录对话框之前短暂未经过身份验证时显示仪表板。

AUTH_CHECK 调用是异步的，并且响应可能会有很长的延迟。即使 AUTH_CHECK 调用的响应尚未到来，我们也选择渲染仪表板。出于性能原因，我们采用了这种策略（称为乐观渲染）。

然而，他们的演示应用程序设法暂时不显示仪表板。它立即显示登录表单。

1. 转到演示应用程序并使用 demo/demo 登录
2. 等待仪表板显示
3. 清除本地存储和cookie
4. 在浏览器控制台 (Chrome) 中减慢 CPU x6 和网络速度以减慢 3G 速度
5. 点击刷新。您看不到仪表板，但立即看到登录对话框

他们在演示应用程序中实现了什么，以实现在未经身份验证时暂时看不到仪表板？因为这也是我想在我的应用程序中实现的目标。

以下内容可能是转移注意力的内容，但如果您发现我的 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

2022 更新：（react-admin 版本 ^4.2.7）

如果有人用这个演示样板他们的react-admin应用程序，并且您的身份验证提供程序似乎工作正常，但仍然遇到仪表板内容未经授权的闪存问题，您需要使用requireAuth标志在根级别禁用匿名访问：

const App = () => (
<Admin dataProvider={dataProvider} authProvider={authProvider} requireAuth>
    <Resource name="some_hypothetical_resource" list={HypotheticalComponent} />
</Admin>

）；

更多信息：文档