Flux+React.js登录/注册流

Flux + React.js Login/register flow

本文关键字：注册 登录 js Flux+React      更新时间：2023-09-26

我正在寻找一些如何在Flux+React.js应用程序中组织最佳登录/注册流程的指南。

我有一个REST API，当注册/登录时，它返回access_token，我可以在所有其他请求中使用它来获取用户数据。非常基础。

我正在使用ReactRouter，首先想到的是将2个<Route>用于登录页面和安全页面，例如：

<Route name="app" handler={AppHandler} path="/">
  <Route name="auth" handler={AuthHandler}>
    <Route name="login" handler={RegisterHandler} path="/register"/>
    <Route name="register" handler={LoginHandler} path="/login"/>
  </Route>
  <Route name="secured" handler={EnsureAuthHandler}>
    <Route name="dashboard" handler={Dashboard} />
  </Route>
  <NotFoundRoute handler={NotFound}/>
</Route>

在EnsureAuthHandler中，我想检查用户是否有访问令牌，如果"否"，我想将他重定向到登录，如果"是"，子路由处理程序可以触发加载其数据的操作。

在RegisterHandler和LoginHandler内部，我有带有几个字段的表单。我正在使用一个AuthStore和一个AuthActions文件。在提交时，我会触发类似AuthActions.register(formData)的smth，如果提交失败，表单组件会从AuthStore将错误发送到state，但如果没有发生错误，我会将用户重定向到Dashboard。

我觉得有点过于复杂了？例如，使用存储来保存登录/注册的错误。

另一点，如何在一个地方拦截未经授权的API错误，addListener到Flux调度器？

您可以在应用程序的React.run点使用回调函数：

// Defaults to `Router.HashLocation`
// callback is called whenever the hash changes
Router.run(routes, callback);
// HTML5 History
// callback is called when history events happen
Router.run(routes, Router.HistoryLocation, callback);
// Server rendering
// callback is called once, immediately.
Router.run(routes, '/some/path', callback);

它接收两个参数：

  1. 根
  2. 州

根-一个ReactComponent类，其中包含当前匹配项，可以进行渲染。

状态-包含匹配状态的对象。

只需转到http://rackt.github.io/react-router/#Router.run

相关文章：