Flux + React.js登录/注册流程

Question

我正在寻找有关如何在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)如果提交失败形式组件获得错误state从AuthStore但如果没有错误发生，我重定向用户Dashboard 。

我觉得有点复杂吗？ 例如，使用商店来保存登录/注册错误。

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

Answer 1

您可以在应用程序的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