Я использую React Router 4 для маршрутизации и Apollo Client для получения данных & кэширование. Мне нужно реализовать решение PrivateRoute и перенаправления на основе следующих критериев:
Страницы, которые пользователю разрешено просматривать, основаны на их статусе пользователя, который можно получить с сервера или прочитать из кэша. Статус пользователя - это, по сути, набор флагов, которые мы используем, чтобы понять, где находится пользователь в нашей воронке. Флаги примеров:
isLoggedIn
,isOnboarded
,isWaitlisted
и т.д.Ни одна страница не должна даже начать отображаться, если статус пользователя не позволяет им быть на этой странице. Например, если вы не
isWaitlisted
, вы не должны видеть страницу списка ожидания. Когда пользователи случайно оказываются на этих страницах, они должны быть перенаправлены на страницу, соответствующую их статусу.Перенаправление также должно быть динамическим. Например, скажем, вы пытаетесь просмотреть свой профиль пользователя, прежде чем вы
isLoggedIn
. Затем нам нужно перенаправить вас на страницу входа. Однако, если выisLoggedIn
, но неisOnboarded
, мы все равно не хотим, чтобы вы видели свой профиль. Поэтому мы хотим перенаправить вас на страницу регистрации.Все это должно происходить на уровне маршрута. Сами страницы должны быть не осведомлены об этих разрешениях & переназначения.
В заключение нам нужна библиотека, которая, учитывая данные о состоянии пользователя, может
- вычислить, может ли пользователь находиться на определенной странице
- вычислить, куда они должны быть перенаправлены динамически
- сделайте это перед отображением любой страницы
- сделать это на уровне маршрута
Я уже работаю над библиотекой общего пользования, но сейчас у нее есть свои недостатки. Я ищу мнения о том, как следует подходить к этой проблеме, и существуют ли установленные модели для достижения этой цели.
Вот мой нынешний подход. Это не работает, потому что данные, которые нужны getRedirectPath
, находятся в OnboardingPage component
.
Кроме того, я не могу обернуть PrivateRoute HOC, который мог бы внедрить реквизиты, необходимые для вычисления пути перенаправления, потому что это не позволило бы мне использовать его как дочерний компонент компонента Switch React Router, поскольку он перестает быть маршрутом.
<PrivateRoute
exact
path="/onboarding"
isRender={(props) => {
return props.userStatus.isLoggedIn && props.userStatus.isWaitlistApproved;
}}
getRedirectPath={(props) => {
if (!props.userStatus.isLoggedIn) return '/login';
if (!props.userStatus.isWaitlistApproved) return '/waitlist';
}}
component={OnboardingPage}
/>