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