Показать разные пункты меню, если пользователь вошел в систему или нет

Question

В моем приложении React-Admin я хочу, чтобы у меня были страницы, доступные только зарегистрированным пользователям и другим пользователям, не зарегистрированным в системе. И это должно быть показано в меню тоже. Если пользователь не вошел в систему, он должен быть виден только на <Menu> страницах, которые не требуют аутентификации, но если он инициирует сеанс, страницы, которые требуют аутентификации, и те, которые не должны быть видны в <Menu>.

Я использовал <Authenticated> компонент в <Menu> для этого, но это перенаправляет меня на страницу входа, если пользователь не аутентифицирован, и я не хочу этого. Я хочу, чтобы набор пользовательских страниц, включая домашнюю страницу, был доступен для всех пользователей, а <Resources> был доступен только для аутентифицированных пользователей.

const Menu = ({resources, onMenuClick, logout, hasDashboard, translate, ...props}) =>{

 return <div>
   {hasDashboard && <DashboardMenuItem onClick={onMenuClick} translate={translate}/>}
   <MenuItemLink
     to="/toAllUsersPage"
     primaryText={translate('toAllUsersPage.title')}
     leftIcon={<MapIcon />}
     onClick={onMenuClick}
   />

   <Authenticated location={props.location}>
     <div>
       {resources.map(resource => (
         <MenuItemLink
           key={resource.name}
           to={`/${resource.name}`}
           primaryText={translate(`resources.${resource.name}.name`, { smart_count: 2 })}
           onClick={onMenuClick}
           leftIcon={ resource.icon ? <resource.icon /> : <DefaultIcon /> }
         />
       ))}
     </div>
   </Authenticated>

   <MenuItemLink
     to="/login"
     primaryText={translate('login.name')}
     leftIcon={<LoginIcon />}        
     onClick={onMenuClick}
   />       
 </div>

}

Как было сказано ранее, это решение всегда перенаправляет на страницу входа, даже если я пытаюсь URL-адрес страницы, которая должна быть доступной, потому что AUTH_CHECK не удается в authProvider в Authenticated компонент. И я не могу иметь <LoginButton>, поскольку Authenticated рендерится только тогда, когда обещание authProvider разрешается. Ранее я использовал isLoggedIn в избыточном состоянии, но это говорит только о том, что последний AUTH_CHECK успешно разрешается, давая несоответствия при обновлении страницы.

Имея это в виду, можно Authenticated не перенаправлять на страницу входа в систему или перенаправлять на страницу по своему выбору и / или можно ли использовать кнопку входа в меню, видимую только в том случае, если пользователь не зарегистрирован?

Answer 1

Почему вы не использовали isLoggedIn опору напрямую?

const Menu = ({resources, onMenuClick, logout, hasDashboard, translate, isLoggedIn, ...props}) => (
    <div>
        {hasDashboard && <DashboardMenuItem onClick={onMenuClick} translate={translate}/>}

        <MenuItemLink
            to="/toAllUsersPage"
            primaryText={translate('toAllUsersPage.title')}
            leftIcon={<MapIcon />}
            onClick={onMenuClick}
        />

        {isLoggedIn && resources.map(resource => (
            <MenuItemLink
                key={resource.name}
                to={`/${resource.name}`}
                primaryText={translate(`resources.${resource.name}.name`, { smart_count: 2 })}
                onClick={onMenuClick}
                leftIcon={ resource.icon ? <resource.icon /> : <DefaultIcon /> }
            />
        ))}

        <MenuItemLink
            to="/login"
            primaryText={translate('login.name')}
            leftIcon={<LoginIcon />}
            onClick={onMenuClick}
        />
    </div>
);