使用登录流处理权限敏感操作的React / Flux方式 [英] React/Flux way to handle permission sensitive actions with login flows
问题描述
我一直在玩React / Flux,而我在绕过'Flux Way'处理权限敏感操作时遇到了麻烦。
I have been playing with React/Flux, and I am having trouble wrapping my head around the 'Flux Way' for handling permission-sensitive actions.
总体问题:
当未登录的访问者尝试需要他/她登录的操作时,(a)检查用户是否已登录的流量方式是什么,(b)启动登录流程, (c)完成成功的行动?
Overarching question: When a non-logged in visitor attempts an action that requires he/she to be logged in, what is the Flux way of (a) checking if a user is logged in, (b) starting the login flow, (c) finishing the action on success?
举一个论坛应用程序的例子,要求用户登录发布:
Take an example of a forum app, that requires users to be logged in to post:
我们有一个评论表单组件(主要来自FB的React tut):
We have a comment form component (mostly taken from FB's React tut) as such:
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;
})
}});
还有一个处理会话的商店(也简称):
And a store for handling sessions (also abbreviated):
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
后立即关闭依赖循环(尽快as ensureCurrentUser
返回)。
My initial thought was that this is a case for Flux's waitFor()
method. However, the implementation above fails, as waitFor
closes the dependency loop as soon as SessionStore.dispatchToken
is set (as soon as ensureCurrentUser
returns).
这是否应将有效负载传递到 ensureCurrentUser
,然后进入 / login
的路由处理程序?什么是Flux处理这些类型的流程的方式?
Is this a case where the payload should be passed into ensureCurrentUser
, and then into the route handler for /login
? What is the Flux way of handling these types of flows?
提前致谢:)
推荐答案
正如FakeRainBrigand在他的回答中建议的那样,你想在创建评论之前通过首先从SessionStore中检索该值来检查用户是否有有效的会话:
As FakeRainBrigand suggested in his answer, you'd want to just check that the user has a valid session before creating a comment by first retrieving that value from the SessionStore:
case CommentConstants.ADD_COMMENT:
if (SessionStore.getUser()) {
createComment(action.data);
}
break;
但要保留评论以便在用户登录后创建,我会创建一个集合在CommentStore中挂起注释,然后在回调登录验证和会话创建时,调度一个新操作以通知CommentStore用户现在已经登录。然后CommentStore可以通过创建真实注释来响应待定的那些。
But to preserve the comment so that it gets created after the user logs in, I would create a collection of pending comments in the CommentStore, and then later, in a callback to the login verification and session creation, dispatch a new action to inform the CommentStore that the user has now logged in. Then the CommentStore can respond to that by creating real comments out of the pending ones.
这篇关于使用登录流处理权限敏感操作的React / Flux方式的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!