ReactJS - 如何设置登录模式

ReactJS - how to setup login pattern?

本文关键字：设置登录模式何设置 ReactJS 更新时间：2023-09-26

如果

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

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

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

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

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

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

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

希望对您有所帮助。