据一位较早的 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).
但是,他们的演示应用程序设法在短时间内不显示仪表板。它立即显示登录表单。
他们在他们的演示应用程序中实现了什么来实现在未经身份验证的情况下短暂地看不到仪表板?因为这也是我想在我的应用程序中完成的。
以下内容可能是一个红鲱鱼,但如果您发现我的 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();
},
}
最佳答案
我们没有为此做任何特别的事情。我怀疑这里有些 react 巫毒。
您可能已经看到 dataProvider 初始化是异步的,在初始化之前,我们展示了一个简单的加载器。 也许 资源和路由初始化在 React 将渲染结果应用于 DOM 之前进行,并且重定向优先。
关于reactjs - 在 react-admin 中未经身份验证时,如何防止仪表板内容闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62383779/