Примеры авторизации клиентской стороны в реакции

Существуют ли какие-либо примеры авторизации на стороне клиента? Подобно https://github.com/fnakstad/angular-client-side-auth

Если нет, то каким образом можно было бы эффективно обрабатывать ролевое отображение/скрытие определенного пользовательского интерфейса внутри?

Ответы

Ответ 1

Вы можете прочитать блогпост, который я написал именно по этому вопросу:). https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/. Вот пример, связанный с Github, связанным с сообщением.

Сообщите мне, если вы сочтете это полезным.

Приветствия

Ответ 2

Вы должны взглянуть на Stormpath React SDK и приложение .

В принципе, с Stormpath и его SDK вы можете легко добавить в приложение свои функции аутентификации пользователя, такие как регистрация, логин и пароль reset.

Это довольно круто, поскольку SDK интегрируется с React Router, добавив, что auth для вашего приложения очень прямолинейно:

<Router history={createBrowserHistory()}>
  <Route path='/' component={MasterPage}>
    <LoginRoute path='/login' component={LoginPage} />
    <LogoutRoute path='/logout' />
    <Route path='/register' component={RegistrationPage} />
    <AuthenticatedRoute path='/profile' component={ProfilePage} />
  </Route>
</Router>

Да, это в основном это. Вы просто используете AuthenticatedRoute на страницах, которые вы хотите защитить.

Затем на LoginPage и RegistrationPage все, что вам нужно сделать, это добавить компоненты SDK LoginForm и RegistrationForm соответственно. И тогда у вас есть место, где ваши пользователи смогут зарегистрироваться и войти в систему.

Хотите, чтобы они вышли из системы? Просто используйте компонент SDK LogoutLink.

<LogoutLink />

И на ваших страницах, если вы хотите скрыть/показать контент на основе аутентификации пользователя или нет, вы можете просто использовать компоненты SDK Authenticated и NotAuthenticated.

<Authenticated>
  I'm authenticated. So show this!
</Authenticated>

Вскоре также можно будет указать группы (роли) в компонент Authenticated. Таким образом, вы можете указать, что вы будете показывать только часть компонента, если она аутентифицирована в определенной группе. Например.

<Authenticated inGroup='administrators'>
  I'm an administrator \o/
</Authenticated>

Это так просто:)

Если это звучит круто, я могу порекомендовать вам взглянуть на сообщение в блоге, которое я написал. Он поможет вам создать приложение React с этими функциями управления пользователями:

https://stormpath.com/blog/build-a-react-app-with-user-authentication/

Отказ от ответственности: Я построил SDK, и я работаю для Stormpath:)