Question

是否有客户端auth的任何反应示例？与https://github.com/fnakstad/angular-client-side-auth

类似

如果没有，那么处理基于角色的显示/隐藏特定UI内部反应的好方法是什么？

Answer 1

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

如果您发现它有用，请告诉我。

干杯

Answer 2

您应该查看Stormpath React SDK及其example application。

基本上，通过Stormpath及其SDK，您可以轻松地向用户添加用户身份验证功能，例如注册，登录和重置密码。

由于SDK与React路由器集成，因此非常酷，为您的应用添加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组件指定组（角色）。因此，您可以指定只有在特定组中进行身份验证时才会显示组件的一部分。 E.g。

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

这很简单：）

如果这听起来很酷我可以建议你看一下我写的博客文章。它将指导您构建具有以下用户管理功能的React应用程序：

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

免责声明：我构建了SDK并且我为Stormpath工作：）

Answer 3

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

客户端身份验证的例子

3 个答案: