JavaScript – React / Flux方法来处理具有登录流的权限敏感操作

我一直在玩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可以通过在挂起的时候创建真实的注释来做出回应.

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...