यूनिवर्सल प्रमाणीकरण Redux और प्रतिक्रिया रूटर

Question

मैं redux के साथ प्रमाणीकरण के साथ कुछ समस्या हो रही है और रूटर प्रतिक्रिया और कैसे सबसे अच्छा मेरी समस्या को हल करने पर कुछ स्पष्टीकरण के लिए उम्मीद कर रहा हूँ।

export const loginUser = (creds) => { 
    return dispatch => { 

    dispatch(requestLogin(creds)) 

    return fetch('http://127.0.0.1:4000/api/login', { 
     ... 
    }) 
     .then(res => { 
     dispatch(receiveLogin()) 
     browserHistory.push('/admin') 
     ... 
     }) 
     ... 
    } 
} 

receiveLogin कार्रवाई को सही पर राज्य में अपडेट हो जाता है isAuthenticated झंडा:

मैं एक लॉगिन घटक है कि जब प्रस्तुत निम्नलिखित कार्रवाई डिस्पैच की है। मेरे संरक्षित मार्ग पर निम्नलिखित हुक है:

export default (state) => { 
    return { 
    path: '/', 
    component: App, 
    childRoutes: [ 
     { 
     path: 'protected', 
     component: Protected, 
     ... 
     onEnter(nextState, replaceState) { 
      const loggedIn = //check state.isAuthenticated 
      if (!loggedIn) { 
      replaceState(null, 'login') 
      } 
     } 
     } 
    ] 
    } 
} 

जैसा कि आप देख सकते हैं, मैं राज्य को तर्क के रूप में पास कर रहा हूं। यह मुझे सर्वर के साथ-साथ क्लाइंट पर प्रारंभिक स्थिति तक पहुंच प्रदान करता है। हालांकि, मेरे लॉगिन कार्रवाई के बाद, स्पष्ट रूप से ऑनर हुक पर भी प्रारंभिक स्थिति का उपयोग किया जाएगा।

क्या मैं जानना चाहता हूँ सबसे अच्छा तरीका है के बाद isAuthenticated झंडा अद्यतन किया जाता है वर्तमान स्थिति हो और बजाय का उपयोग है कि मेरे onEnter हुक में है। या, मेरा दृष्टिकोण पूरी तरह से त्रुटिपूर्ण है और क्या मैं इसे पूरी तरह से अलग तरीके से कर रहा हूं?

Answer 1

मैं ने पाया है कि onEnter हुक का उपयोग कर प्रमाणन तर्क के इस प्रकार से निपटने के लिए और एक redux दुकान से कनेक्ट होने के लिए मेरे अनुप्रयोगों में सबसे अच्छा तरीका नहीं है।

यहां (कई) नुकसानों में से एक यह है कि यदि आप किसी उपयोगकर्ता को 'संरक्षित' मार्ग पर लॉग इन कर सकते हैं, तो अगर वे 'संरक्षित' में लॉगआउट करना चाहते हैं तो वे कभी भी 'लॉगिन' पर रीडायरेक्ट नहीं होंगे क्योंकि यह नहीं होगा ऑनर ट्रिगर नहीं करते हैं।

उच्च ऑर्डर घटकों का उपयोग करने का एक वैकल्पिक दृष्टिकोण है, मिश्रण एब्रॉमोव के post को मिक्सिन पर उपयोग करने के बारे में देखें, और मुझे उन्हें इस संदर्भ में भी वास्तव में उपयोगी लगता है। उनके उपयोग के तरीके के बारे में कुछ गिस्ट/उदाहरण दोबारा निकल गए हैं, लेकिन मैंने हाल ही में इस उद्देश्य के लिए लाइब्रेरी redux-auth-wrapper बनाया है। यह बहुत नया है, लेकिन मुझे लगता है कि यह उपयोगी हो सकता है और एचओसी के गलत तरीके से उपयोग करने के दौरान कुछ खतरों से बचाता है जिसके परिणामस्वरूप infinite-loop-redirects हो सकता है।

एक अस्थायी प्रयोग का विचार है कि यह एक समारोह है कि जब एक घटक के लिए लागू किसी तरह से अपनी कार्यक्षमता का विस्तार है। स्टोर के लिए सदस्यता के साथ घटकों को बढ़ाने के लिए रेडक्स के उपयोगकर्ता connect से अधिकतर परिचित हैं।

इस मामले में, घटक आप लिखते हैं प्रमाणीकरण/प्राधिकरण द्वारा संरक्षित किया जा रहा से अनजान है और जब अस्थायी समारोह लागू किया, यह देखते हुए चेकों के साथ एक नया घटक दिया जाता है। यदि वे पास हो जाएं, तो लपेटा गया घटक वापस कर दिया जाता है, अन्यथा उपयोगकर्ता को लॉगिन करने के लिए किसी स्थान पर रीडायरेक्ट किया जाता है (या कहीं और अगर यह प्राधिकरण समस्या हो)। एचओसी componentWillMount और componentWillReceiveProps लाइफसाइकिल विधियों का उपयोग गीलेर को निर्धारित करने के लिए करता है या नहीं, उपयोगकर्ता को दिए गए घटक को देखने की अनुमति है। यह प्रमाणीकरण परिवर्तन पर घटकों से बाहर रीडायरेक्ट करने के लिए समर्थन की अनुमति देता है भले ही मार्ग नहीं है। https://github.com/joshgeller/react-redux-jwt-auth-example:

मैं भी एक समान रणनीति के उदाहरण की जाँच होगी।

और यहाँ एक उदाहरण कुछ दुकान प्रवंचना के साथ प्रमाणन के लिए onEnter का उपयोग करता है है, लेकिन मेरा मानना ​​है कि यह बढ़त मामले में ऊपर वर्णित संभाल नहीं होगा: https://github.com/CrocoDillon/universal-react-redux-boilerplate/blob/master/src/routes.jsx।