客户端身份验证的例子

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及其示例应用程序.

基本上,使用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.因此,您可以指定只有在特定组中进行身份验证时才会显示组件的一部分.例如

<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文档中的一个很好的auth流程示例:https://github.com/rackt/react-router/tree/master/examples/auth-flow