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我想检查用户是否有访问令牌，如果＆＃34;否＆＃34;我想重定向他登录，如果＆＃34;是＆＃34;子路由处理程序可以触发动作来加载它的＆＃39;数据

在RegisterHandler和LoginHandler内，我有几个字段的表单。我使用了一个AuthStore和一个AuthActions文件。在提交时，我会像AuthActions.register(formData)一样触发smth，如果提交失败，表单组件会从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);

收到两个论点：

Root
状态

根 - 一个ReactComponent类，当前匹配都包含在其中，准备好呈现。

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

去吧 http://rackt.github.io/react-router/#Router.run

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

1 个答案: