未登录的仪表板渲染

Question

我正在使用演示项目，我请求“ /登录”页面，没有问题，已加载登录页面。但是我要求“ /”登录页面后首先呈现仪表板。有什么主意吗？

例如，我要使用“ http://localhost:3001/react-admin-demo#/login”，请不要渲染仪表板。但是我要去“ http://localhost:3001/react-admin-demo#/”，我看到“仪表板使用效果”日志。

authProvider =>

    import { AuthProvider } from 'ra-core';

const async: AuthProvider = {
    login: ({ username, password }) => {
        if (username === 'ali' && password === '1234') {
            localStorage.setItem('username', username);
            localStorage.setItem('password', password);
            return Promise.resolve();
        } else {
            return Promise.reject();
        }
    },
    logout: () => {
        localStorage.removeItem('username');
        return Promise.resolve();
    },
    checkError: () => Promise.resolve(),
    checkAuth: () =>
        localStorage.getItem('username') ? Promise.resolve() : Promise.reject(),
    getPermissions: () => Promise.reject('Unknown method'),
};

export default authProvider;

我在仪表板上的登录=>

 useEffect(() => {
        console.log('dashboard useEffect');
        fetchOrders();
        fetchReviews();
    }, [version]); // eslint-disable-line react-hooks/exhaustive-deps

Answer 1

它是这样工作的。从react-admin文档（https://marmelab.com/react-admin/Authentication.html）：

useAuthenticated挂钩很乐观：它不会阻止渲染 在authProvider调用期间。在上面的示例中，MyPage 组件甚至在获得响应之前就呈现 authProvider。如果呼叫返回被拒绝的承诺，则挂钩 重定向到登录页面，但用户可能已经看到了内容 MyPage组件一会儿。

引号指的是自定义页面（在他们的示例中为MyPage），但我认为仪表板也会发生同样的事情。

通过使用useAuthState钩子，我可以避免在自定义页面上使用它（其用法已在文档中进行了说明）。我没有为仪表板尝试过它，但是应该可行。