使用登录流处理权限敏感操作的React/Flux方式

Question

我一直在使用React/Flux,我无法绕过'Flux Way'处理权限敏感操作.

首要问题:当未登录的访问者尝试需要他/她登录的操作时,(a)检查用户是否已登录,(b)启动登录流程(c)的Flux方式是什么？ )完成成功的行动？

以一个论坛应用为例,要求用户登录发布:

我们有一个评论表单组件(主要来自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()方法的一个案例.但是,上面的实现失败了,因为waitFor一旦SessionStore.dispatchToken设置就关闭依赖循环(一旦ensureCurrentUser返回).

这是有效负载应该传入的情况ensureCurrentUser,然后进入路由处理程序/login吗？Flux处理这些类型流的方式是什么？

提前致谢 :)

Answer 1

正如FakeRainBrigand在他的回答中建议的那样,你想在创建评论之前检查用户是否有一个有效的会话,方法是首先从SessionStore中检索该值:

case CommentConstants.ADD_COMMENT:
  if (SessionStore.getUser()) {
   createComment(action.data);
  }
  break;

但为了保留注释以便在用户登录后创建注释,我将在CommentStore中创建待处理注释的集合,然后在回调登录验证和会话创建时,发送新操作以通知CommentStore用户现在已登录.然后,CommentStore可以通过从待处理的注释中创建真实注释来响应.