Javascript 通量+；React.js登录/注册流

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

我拥有的是一个REST API，在注册/登录时返回

access\u token

，我可以在所有其他请求中使用它来获取用户数据。非常基本

我正在使用ReactRouter，首先想到的是在登录页面和安全页面上使用2个

，例如：

<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

文件。在提交时，我会启动smth，比如

AuthActions.register（formData）

，如果提交失败，表单组件会从

AuthStore

获取错误到

状态

，但如果没有错误发生，我会将用户重定向到

仪表板

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

---

另一点，如何在一个地方拦截未经授权的API错误，

addListener

到Flux dispatcher？

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

它接收两个参数：

根

陈述

根目录- 一个包含当前匹配项的ReactComponent类，所有内容都包装在该类中，可供您渲染

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

去

查看React/Flux dev stack和启动器套件。它有一个登录和注册组件。