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

Question

根据较早的评论和我对我的应用程序的经历，react-admin 可能会在重定向并显示登录对话框之前短暂未进行身份验证时显示仪表板。

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

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

1. 转到演示应用程序并使用演示/演示登录
2. 等待仪表板显示
3. 清除本地存储和饼干
4. 在浏览器控制台中减慢 CPU x6 和网络以减慢 3G 速度 (Chrome(
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 年更新：(反应管理员版本 ^4.2.7(

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

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

(;

详细信息：文档

Answer 2

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

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