我正在寻找一些如何在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);
它接收两个参数:
- 根
- 州
根-一个ReactComponent类,其中包含当前匹配项,可以进行渲染。
状态-包含匹配状态的对象。
只需转到http://rackt.github.io/react-router/#Router.run