反应中的客户端身份验证示例

Examples of client side auth in react

本文关键字：身份验证 客户端      更新时间：2023-09-26

有没有客户端身份验证的例子？类似于 https://github.com/fnakstad/angular-client-side-auth

如果没有，在 react 中处理特定 UI 的基于角色的显示/隐藏的好方法是什么？

你可以阅读我写的一篇关于这个主题的博客文章:)https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/。有一个关于Github链接的例子。

如果您觉得有用，请告诉我。

干杯

你应该看看 Stormpath React SDK 及其示例应用程序。

基本上，借助 Stormpath 及其 SDK，您可以轻松地将用户身份验证功能（例如注册、登录和重置密码）添加到您的应用程序中。

这很酷，因为SDK与React Router集成，为您的应用程序添加身份验证非常简单：

<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 工作:)

这是 React-Router 文档中一个很好的身份验证流示例 https://github.com/rackt/react-router/tree/master/examples/auth-flow：

相关文章：