Javascript 反应中客户端身份验证的示例
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27626366/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Examples of client side auth in react
提问by Eric
Are there any examples of client side auth for react? Similar to https://github.com/fnakstad/angular-client-side-auth
有没有客户端身份验证的例子？类似于https://github.com/fnakstad/angular-client-side-auth
If not, what would be a good way to handle role based showing/hiding of specific UI inside react?
如果不是，那么在 react 中处理基于角色的特定 UI 显示/隐藏的好方法是什么？
回答by mgonto
You can read a blogpost I wrote exactly about this subject :). https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/. There's an example on Github linking from the post.
你可以阅读我写的一篇关于这个主题的博文:)。https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/。帖子中有一个关于 Github 链接的示例。
Let me know if you find it useful.
如果您觉得它有用，请告诉我。
Cheers
干杯
回答by Robin Orheden
You should take a look at the Stormpath React SDKand its example application.
您应该查看Stormpath React SDK及其示例应用程序。
Basically, with Stormpathand its SDK you can easily add user authentication features such as sign up, login and reset password, to your app.
基本上，使用Stormpath及其 SDK，您可以轻松地向您的应用程序添加用户身份验证功能，例如注册、登录和重置密码。
It's pretty cool since the SDK integrates with React Router, adding auth to your app is very straight-forward:
非常酷，因为 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>
Yeah, that's basically it. You just use AuthenticatedRouteon the pages that you want to protect.
是的，基本上就是这样。您只需AuthenticatedRoute在要保护的页面上使用。
Then on the LoginPageand RegistrationPageall you need to do is add the SDK components LoginFormand RegistrationFormrespectively. And then you have a place where your users will be able to sign up and login.
然后在LoginPage和RegistrationPage所有你需要做的就是添加SDK组件LoginForm和RegistrationForm分别。然后你有一个地方，你的用户将能够注册和登录。
Want them to logout? Just use the SDK component LogoutLink.
想让他们退出？只需使用 SDK 组件LogoutLink。
<LogoutLink />
And within your pages, if you want to hide/show content based if a user is authenticated or not, you can just use the SDK components Authenticatedand NotAuthenticated.
在您的页面中，如果您想根据用户是否通过身份验证来隐藏/显示内容，您只需使用 SDK 组件Authenticated和NotAuthenticated.
<Authenticated>
I'm authenticated. So show this!
</Authenticated>
Soon it will also be possible to specify groups (roles) to the Authenticatedcomponent. So you can specify that you'll only show a part of a component if it is authenticated in a certain group. E.g.
很快，也可以为组件指定组（角色）Authenticated。因此，您可以指定仅显示在某个组中经过身份验证的组件的一部分。例如
<Authenticated inGroup='administrators'>
I'm an administrator \o/
</Authenticated>
It's that simple :)
就是这么简单:)
If this sounds cool I can recommend that you take a look at the blog post that I wrote. It will take you through building a React application with these user management features:
如果这听起来很酷，我可以建议您查看我写的博客文章。它将带您构建具有以下用户管理功能的 React 应用程序：
https://stormpath.com/blog/build-a-react-app-with-user-authentication/
https://stormpath.com/blog/build-a-react-app-with-user-authentication/
Disclaimer:I built the SDK and I work for Stormpath :)
免责声明：我构建了 SDK 并为 Stormpath 工作 :)
回答by Ghislaindj
Here is a good auth flow example inside React-Router documentation : https://github.com/rackt/react-router/tree/master/examples/auth-flow
这是 React-Router 文档中的一个很好的身份验证流程示例：https: //github.com/rackt/react-router/tree/master/examples/auth-flow
