Javascript react中客户端身份验证的示例

是否有react客户端身份验证的示例？近似

---

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

react路由器文档中有一个很好的身份验证流示例：

你可以阅读我写的一篇关于这个主题的博客帖子：）。文章中有一个关于Github链接的例子

如果你觉得有用，请告诉我

---

干杯

你应该看一看它和它的

基本上，通过它的SDK，您可以轻松地向应用程序添加用户身份验证功能，如注册、登录和重置密码

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>

在您的页面中，如果您想根据用户是否经过身份验证来隐藏/显示内容，您可以使用SDK组件和

就这么简单：）

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

---

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

这是一个非常好的身份验证流程，但不提供基于用户角色显示/隐藏UI元素的授权。我刚刚写了一篇关于基于角色的身份验证的文章。也许会有帮助。您是在寻找客户端身份验证工作流还是通过显示UI的不同部分来处理不同角色的方法？或者两者都有？不是authflow。只是想找到一种处理不同角色的方法来显示UI的不同部分。谢谢。我最终创建了一个mixin，在需要的组件上包含它。mixin只是隐藏或显示带有CSS的HTML元素。mixin的核心是这个方法：

需要：函数（权限）{if（this.profile.permissions.indexOf（permission）==-1{return“hidden”}否则返回“visible”}

然后我就做一些类似于

受限内容

的事情，这很酷。然而，自v.13以来，mixin并没有被弃用。您现在应该使用可组合的aproach@Eric@mgonto我相信他们改变了决定，Mixin又回来了。见例。他们说“如果您使用的是

导航

mixin，请使用

历史

mixin。”注意，他们仍然建议您在这里使用mixin。嗨，罗宾，谢谢您的示例，非常有用。但是，当我尝试适应现有的

code:bundle.js:33050未捕获类型错误：无法读取null的属性'dispatch'

方法：

\u createClass（UserActions，[{key:'login'，value:function login（options，callback）{this.context.getDispatcher（）.dispatch({actionType:_UserConstants2.default.USER_LOGIN，options:options，callback:callback}；}}

问题似乎出在这个.context.getDispatcher（）上，知道问题出在哪里了吗？谢谢，托马斯！看到你在尝试它真是太棒了。我猜它没有正常运行。如果你想的话，你可以给我发一封电子邮件，地址是

robin[at]stormpath[dot]com

，我会帮你：）干杯！你如何用用户数据加载配置文件对象？我的意思是从服务器上把它传递给客户端？

<LogoutLink />

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

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