Показывать разные пункты меню, если пользователь вошел в систему или нет
В моем приложении 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 не будет перенаправлять на страницу входа или перенаправлять на страницу по моему выбору и / или могу ли я иметь кнопку входа в систему в меню, видимую только тогда, когда пользователь не вошел в систему?
Ответы 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>
);
USER_CHECK используется, чтобы узнать, вошел ли пользователь в систему, поэтому я не вижу, чтобы prb его использовал. Вы можете объяснить ?
Мой плохой isLoggedIn в состоянии redux сообщает результат последнего AUTH_CHECK, а не USER_CHECK, как сказано в проблема, которое я открыл несколько дней назад. Насколько я знаю, нет никакой переменной, которая сообщает, вошел ли пользователь в систему или нет. Решения, которые решают мою проблему, могут быть переменной, которая сообщает зарегистрированное состояние пользователя, или способ, которым <Authenticated> не перенаправляет на LoginPage и продолжает выполнение программы. PS: Я использую опцию меню <Admin> в RA версии 2.0, я только что увидел, что она устарела. Решит ли эту проблему пользовательский макет?
Да, я тоже имел ввиду AUTH_CHECK. Это действительно отражает тот факт, что пользователь авторизован для доступа к приложению, следовательно, вошел в систему. Так что я все еще не вижу проблемы с использованием isLoggedIn. Пользовательский макет не решит проблему
Проблема в том, что если страница обновляется, состояние redux сбрасывается, isLoggedIn возвращается к значению по умолчанию, а AUTH_CHECK - это нет, выполняемый при инициации. Это означает, что после обновления меню будет предполагать, что пользователь зарегистрирован в нет, но это так.
Я понимаю. Тогда вам нужно будет реализовать собственный редуктор. Как вы проверяете, вошел ли пользователь в систему? sessionStorage?
Я не использую какой-либо специальный редуктор с isLoggedIn, эта переменная происходит из состояния редукции RA. Однако используется настраиваемый authProvider, а в AUTH_CHECK наличие токена в localStorage для целей разработки определяет, вошел ли пользователь в систему,
Хорошо, теперь я вижу проблему, я поработаю над другим ответом как можно скорее
У вас есть примерная дата, когда можно будет ответить?
Извини, нет. Сейчас очень занят. Вкратце, объявите настраиваемый редуктор для вашего собственного состояния isLoggedIn, который будет инициализировать свое состояние из вашего localStorage (вам действительно следует использовать sessionStorage, кстати, более безопасный) и прослушивать действия USER_LOGIN_SUCCESS и USER_LOGOUT
Понятно. Я исправил проблему с помощью специальной саги, которая прослушивает USER_CHECK и вызывает authProvider с помощью AUTH_CHECK, а в случае успеха делает USER_LOGIN_SUCCESS. Это работает, но это будет происходить при каждой ПРОВЕРКЕ, даже когда пользователь вошел в систему, ваш вариант имеет больше смысла. В любом случае, поскольку в зависимости от аутентификации пользователя могут отображаться разные представления, не следует ли RA проверять, вошел ли пользователь в систему перед рендерингом?
Существует так много способов определить, вошел ли пользователь в систему или нет. Мы бы предпочли возложить на вас ответственность за это. Кроме того, некоторым приложениям даже не нужна аутентификация;)
Свойство isLoggedIn происходит от прослушивания isLoggedIn в состоянии redux, которое сообщает последний результат USER_CHECK, а не зарегистрирован пользователь или нет, и по умолчанию имеет значение false. Я забыл удалить это из кода примера, уже отредактированного.