लॉगिन प्रवाह के साथ अनुमति संवेदनशील क्रियाओं को संभालने के लिए प्रतिक्रिया/प्रवाह मार्ग

Question

मैं रिएक्ट/फ्लक्स के साथ खेल रहा हूं, और मुझे अनुमति-संवेदनशील कार्यों को संभालने के लिए 'फ्लक्स वे' के चारों ओर अपने सिर को लपेटने में परेशानी हो रही है।

प्रश्न पूछना: जब कोई गैर-लॉग इन विज़िटर उस क्रिया को स्वीकार करता है जिसके लिए उसे लॉग इन करने की आवश्यकता होती है, तो फ्लक्स का तरीका क्या है (ए) उपयोगकर्ता लॉग इन होने पर जांच कर रहा है, (बी) शुरू करना लॉगिन प्रवाह, (सी) सफलता पर कार्रवाई खत्म?

एक मंच अनुप्रयोग, है कि उपयोगकर्ताओं को आवश्यकता का एक उदाहरण ले लो पोस्ट करने के लिए लॉग इन करना:

हम एक टिप्पणी प्रपत्र घटक है जैसे (ज्यादातर अमेरिकन प्लान के से लिया टुट प्रतिक्रिया):

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; 
    }) 
}}); 

मेरा प्रारंभिक विचार यह था कि यह फ्लक्स की waitFor() विधि का मामला है। हालांकि, उपरोक्त कार्यान्वयन विफल रहता है, क्योंकि waitForSessionStore.dispatchToken सेट होने पर निर्भरता पाश को बंद कर देता है (जैसे ही ensureCurrentUser रिटर्न)।

क्या यह मामला है जहां पेलोड ensureCurrentUser में और फिर /login के लिए रूट हैंडलर में पारित किया जाना चाहिए? इन प्रकार के प्रवाहों को संभालने का प्रवाह तरीका क्या है?

अग्रिम में :)

Answer 1

FakeRainBrigand के रूप में अपने जवाब में सुझाव दिया, तो आप सिर्फ जांच करने के लिए उपयोगकर्ता के पास मान्य सत्र है कि पहले SessionStore से है कि मूल्य को पुन: प्राप्त द्वारा एक टिप्पणी बनाने से पहले चाहते हैं ताकि उपयोगकर्ता लॉग इन करने के बाद इसे बनाया जा सके, मैं टिप्पणीस्टोर में लंबित टिप्पणियों का संग्रह तैयार करूंगा, और उसके बाद, लॉगिन सत्यापन और सत्र निर्माण के लिए कॉलबैक में, टिप्पणीस्टोर को सूचित करने के लिए एक नई कार्रवाई प्रेषित करें कि उपयोगकर्ता के पास है अब लॉग इन किया गया है। फिर टिप्पणीस्टोर लंबित लोगों से वास्तविक टिप्पणियां बनाकर इसका जवाब दे सकता है।

Answer 2

सरल धन्यवाद बस SessionStore पूछ एक सत्र हो, तो हो सकता है।

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

बेशक, यह आपको बस एक सर्वर अनुरोध बचाता है। व्यवहार हमेशा createComment(action.data) पर कॉल करने से अलग नहीं होना चाहिए।

क्या यह ऐसा मामला है जहां पेलोड को सुनिश्चित करने के लिए जारी किया जाना चाहिए, और फिर रूट हैंडलर/लॉगिन के लिए? इन प्रकार के प्रवाहों को संभालने का प्रवाह तरीका क्या है?

इसके लिए, आप एक ईवेंट एमिटर चाहते हैं जो 'लॉगिन' ईवेंट को छोड़ देता है।

case CommentConstants.ADD_COMMENT: 
    if (SessionStore.getUser()) { 
     createComment(action.data); 
    } 
    else { 
     someEventEmitter.one('login', function(){ 
      createComment(action.data); 
     }); 
     someEventEmitter.emit('loginRequired'); 
    } 
    break; 

और जब loginRequired उत्सर्जित होता है, अगर वहाँ एक उपयोगकर्ता में लॉग इन नहीं है, लॉगिन दृश्य प्रस्तुत किया जाएगा।

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

लेकिन टिप्पणी संरक्षित करने के लिए:

Answer 3

यह ध्यान दिया जाना चाहिए कि प्रतिक्रिया-राउटर रेपो में auth-flow नामक एक उदाहरण है, जो कि यह कैसे किया जा सकता है, इस पर प्रकाश डालता है। हालांकि, मैं अभी भी इसे मेरे लिए काम करने की कोशिश कर रहा हूं, यह यहां जोड़ने के लिए उपयोगी है।