我一直在玩React / Flux,而且我的头脑围绕着“Flux Way”卷入了处理权限敏感的行为.
总体问题:
当一个未登录的访问者尝试一个需要他/她登录的动作时,Flux的方法是(a)检查用户是否登录,(b)启动登录流程,(c)完成成功的行动
我们有一个注释表单组件(大部分来自FB的React tut):
var CommentForm = React.createClass({ handleSubmit: function ( e ) { e.preventDefault(); // get data commentData = { content: this.refs.content.getDOMNode().value.trim() }; this.props.onCommentSubmit( commentData ); this.resetForm(); },resetForm: function () { this.refs.content.getDOMNode().value = ''; },render: function () { return ( <form className="comment-form" id="comment-form" onSubmit={ this.handleSubmit }> <textarea name="comment[content]" placeholder="What's on your mind?" ref="content"></textarea> <button className="post-comment button" type="submit">Post</button> </form> ) } });
评论店(缩写)
var CHANGE_EVENT = 'change'; var _comments = {}; function createComment ( data ) { // post to server } var CommentStore = React.addons.update(EventEmitter.prototype,{$merge: { // omitted methods dispatcherIndex: AppDispatcher.register(function(payload) { var action = payload.action; var text; switch(action.actionType) { case CommentConstants.ADD_COMMENT: AppDispatcher.waitFor([SessionStore.dispatchToken]) createComment(action.data); break; } return true; }) }});
和一个处理会议的商店(也简称):
var CHANGE_EVENT = 'change'; function ensureCurrentUser () { if ( !SessionStore.currentUser() ) { app.router.navigate('/login'); } } var SessionStore = React.addons.update(EventEmitter.prototype,{$merge: { // omitted code currentUser: function () { return app.context.current_user; },dispatchToken: AppDispatcher.register(function ( payload ) { var action = payload.action; switch(action.actionType) { case CommentConstants.ADD_COMMENT: ensureCurrentUser(); break; } return true; }) }});
我最初的想法是,这是Flux的waitFor()方法的一个例子.然而,上面的实现失败,因为wait只要设置了SessionStore.dispatchToken(只要ensureCurrentUser返回)就关闭依赖循环.
这样的情况下,有效载荷应该传递到ensureCurrentUser,然后进入/ login的路由处理程序?流量处理这些流量的方法是什么?
提前致谢 :)
解决方法
正如FakeRainBrigand在他的答案中建议的那样,您只需检查用户在创建注释之前是否有一个有效的会话,首先从SessionStore中检索该值:
case CommentConstants.ADD_COMMENT: if (SessionStore.getUser()) { createComment(action.data); } break;
但是要保留注释,以便在用户登录后创建注释,我将在CommentStore中创建一个未决注释的集合,然后在回调登录验证和会话创建过程中,发出新的操作以通知用户现在已经登录的CommentStore.然后,CommentStore可以通过在挂起的时候创建真实的注释来做出回应.