javascript - ReactJS - 如何设置登录模式?

标签 javascript authentication reactjs authorization

如果这个问题有点模糊,我很抱歉,但我是第一次解决这个问题,任何指针都会有用。

我正在使用 ReactJS 构建一个网络应用程序,我需要一个登录系统 - 第一页有两个字段用户名/密码和提交按钮。服务器返回一个 token (1234),需要在身份验证 header (Authorization: Bearer 1234) 中使用该 token 才能访问 protected 区域。

我应该如何处理登录并让浏览器自行更新登录后可用的新内容?

最佳答案

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

我认为你可以使用这样的模式:你获取用户输入并通过 AJAX 发送它们(使用 JQuery、Superagent,无论你想要什么)。如果输入有效并且用户经过身份验证,服务器会发回带有一些用户信息的 token ,其中可以包括他的 Angular 色或权限。根据这些接收到的数据,您可以使用 React-Router 渲染其他组件,例如欢迎页面(通过在React-Router历史对象上调用replaceState - 例如在flux操作中)。

此外,您应该将此 token 保存在 cookie 中或 session /本地存储中(以便能够在每个后续请求中使用它),并且用户信息可以存储在 Flux 存储中。保存此用户后,商店会发出更改事件,这应该会导致使用您获得的用户信息重新渲染您的根组件。

然后,根据商店中的新用户 Angular 色或权限,您可以在某些组件上使用 ES7 装饰器来决定是否显示实际组件。

希望对你有一点帮助。

关于javascript - ReactJS - 如何设置登录模式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34942417/

相关文章:

Javascript 程序产生未定义(递归)

javascript - javascript/jQuery 中的日期差异

javascript - 如果类被多次使用,会发出警报吗?

ruby-on-rails - Rails 的用户身份验证支持,而非授权

ASP.NET MVC 3 : I cannot navigate to my "Content" directory until authorized

reactjs - Redux 工具包 : How to refer action created with createAction as type

javascript - Angular 2 : Ts: Nested functions

ruby-on-rails - ruby rails : Common method available for controllers and views?

javascript - 链接选择的选择

reactjs - Electron + ReactJS + Material-UI 渲染故障