0

在我的 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在 redux 状态下使用，但这只是说如果最后AUTH_CHECK解决成功，在页面刷新时会出现不一致。

考虑到这一点，可以Authenticated不重定向到登录页面或重定向到我选择的页面和/或我可以在菜单中设置登录按钮，仅在用户未登录时可见？

4

1 回答 1

0

为什么不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>
);
于 2018-07-01T17:45:30.593 回答