ReactJS - 如何设置登录模式？

对不起，如果这个问题有点含糊，但我第一次解决这个问题，任何指针都会有用。ReactJS - 如何设置登录模式？

我正在使用ReactJS构建一个Web应用程序，我需要一个登录系统 - 第一页带有两个字段的用户名/密码和提交按钮。服务器返回一个令牌（1234），这需要在auth头文件（Authorization: Bearer 1234）中使用才能访问保护区域。

我应该如何处理登录并使浏览器使用登录后可用的新内容进行更新？

来源

2016-01-22 ticofab

您需要添加更多信息您计划实施的认证类型。如果你不确定这一点，你需要研究你的选择。有关SO和其他资源的帖子很多。也许这是有帮助的，以及给予一些第一见解：https://auth0.com/blog/2015/04/09/adding-authentication-to-your-react-flux-app/ – bentrm

两个好读：用它做[React-Router]（https://github.com/rackt/react-router/tree/master/examples/auth-flow）和[react + flux login（甚至有一个OAuth示例）]（https：// auth0 .com/blog/2015/04/09/added-authentication-to-your-react-flux-app /） –

感谢您的意见和链接。我编辑了我的问题关于认证的更多细节。 – ticofab

正如其他人指出的那样，使用React-Router是一个好主意。

我认为你可以使用这样的模式：你得到用户输入并通过AJAX发送（使用JQuery，Superagent，任何你想要的）。如果输入有效且用户已通过验证，则服务器会发回包含其角色或权限的用户信息的令牌。根据这些收到的数据，你可以使用React-Router渲染其他组件，例如欢迎页面（通过在React-Router历史对象上调用replaceState - 例如在flux动作中）。

此外，您应该将此令牌保存在cookie或会话/本地存储中（以便能够在每个后续请求中使用它），并且用户信息可以存储在Flux存储中。保存此用户后，商店发出更改事件，这会导致用户信息重新渲染根组件。

然后，根据商店中的新用户角色或权限，例如，如果显示实际组件，您可以在某些组件上确定ES7装饰器。

希望它能帮助你一点。

来源

2016-01-22 14:53:00

ReactJS - 如何设置登录模式？

回答

相关问题