ReactJS RBAC कार्यान्वयन दृष्टिकोण

प्रविष्टि

नमस्कार प्रिय पाठक!

कुछ समय (लगभग एक वर्ष पहले), मुझे वर्तमान उपयोगकर्ता अधिकारों के आधार पर, ReactJS में घटकों को सशर्त रूप से प्रस्तुत करने की आवश्यकता के साथ सामना किया गया था। पहली बात मैंने तैयार समाधानों और "सर्वोत्तम प्रथाओं" की तलाश शुरू की। " रिएक्ट में भूमिका आधारित प्राधिकरण " लेख उच्च-आदेश घटकों (एचओसी) के उपयोग से सबसे अधिक प्रभावित हुआ। लेकिन, दुर्भाग्य से, मुझे ऐसा समाधान नहीं मिला, जो मुझे संतुष्ट करे।


उस समय मैं प्रतिक्रिया-रिड्यूक्स-कनेक्ट (एनपीएम मॉड्यूल) से थोड़ा परिचित था, और कनेक्ट फ़ंक्शन में उपयोग किए जाने वाले सजावट दृष्टिकोण से मैं बहुत झुका हुआ था। कनेक्ट डिवाइस का विस्तृत विश्लेषण यहां पाया जा सकता है ।

समाधान का वर्णन

पहले आपको यह निर्धारित करने की आवश्यकता है कि किसी घटक को प्रदान करने के बारे में निर्णय लेने के लिए न्यूनतम जानकारी की क्या आवश्यकता है। जाहिर है, रेंडर करने के लिए कुछ शर्त को पूरा करना आवश्यक है (एक विकल्प के रूप में, कुछ प्रकार का अधिकार है - उदाहरण के लिए, एक नया उपयोगकर्ता जोड़ने का अधिकार)। हम इस स्थिति को एक आवश्यकता (या अंग्रेजी में आवश्यकता) कहते हैं। यह समझने के लिए कि क्या आवश्यकता संतुष्ट हो गई है, हम वर्तमान उपयोगकर्ता अधिकारों के एक सेट पर आधारित हो सकते हैं - क्रेडेंशियल । यही है, यह एक फ़ंक्शन को परिभाषित करने के लिए पर्याप्त है:

function isSatisfied(requirement, credentials) { if (...) { return false; } return true; } 

अब हमने कमोबेश प्रतिपादन की स्थिति पर निर्णय लिया है। इसका उपयोग कैसे करें?

1. हम माथे दृष्टिकोण का उपयोग कर सकते हैं:

 const requirement = {...}; class App extends Component { render() { const {credentials} = this.props; return isSatisfied(requirement, credentials) && <TargetComponent>; } } 

2. हम थोड़ा आगे जा सकते हैं, और लक्ष्य घटक को दूसरे में लपेट सकते हैं, जो आवश्यकता का सत्यापन करेगा:

 const requirement = {...}; class ProtectedTargetComponent extends Component { render() { const {credentials} = this.props; return ( isSatisfied(requirement, credentials) ? <TargetComponent {...this.props}> {this.props.children} </TargetComponent> : null ); } } class App extends Component { render() { const {credentials} = this.props; return <ProtectedTargetComponent/>; } } 

मैन्युअल रूप से प्रत्येक लक्ष्य घटक के लिए एक आवरण लिखना बहुत ही डरावना है। हम इसे कैसे सरल बना सकते हैं?

3. हम HOC तंत्र का सहारा ले सकते हैं ("प्रतिक्रिया-रिड्यूक्स-कनेक्ट से कनेक्ट के साथ सादृश्य द्वारा"):

 function protect(requirement, WrappedComponent) { return class extends Component { render() { const { credentials } = this.props; return ( isSatisfied(requirement, credentials) ? <WrappedComponent {...this.props}> {this.props.children} </WrappedComponent> : null ); } } } ... const requireAdmin = {...}; const AdminButton = protect(requireAdmin, Button); ... class App extends Component { render() { const {credentials} = this.props; return ( ... <AdminButton credentials={credentials}> Add user </AdminButton> ... ); } } 

पहले से ही बेहतर, लेकिन फिर भी मनहूस - आपको घटकों के पूरे पेड़ के माध्यम से मैन्युअल रूप से क्रेडेंशियल्स फेंकने की आवश्यकता है। इससे क्या हो सकता है? यह मानना ​​तर्कसंगत है कि वर्तमान उपयोगकर्ता की साख पूरे आवेदन के लिए एक वैश्विक वस्तु है। फिर फिर से प्रतिक्रिया-रिड्यूक्स-कनेक्ट बचाव के लिए आता है। इस मॉड्यूल के उपकरण के बारे में एक लेख पढ़ने के बाद, हम पाते हैं कि यह कुछ रिएक्टजेएस संदर्भों का उपयोग करता है ।

4. संदर्भ तंत्र का उपयोग करते हुए, हम अंतिम दृष्टिकोण प्राप्त करते हैं:

 const { Provider, Consumer } = React.createContext(); function protect(requirement, WrappedComponent) { return class extends Component { render() { return ( <Consumer> { credentials => isSatisfied(requirement, credentials) ? <WrappedComponent {...this.props}> {this.props.children} </WrappedComponent> : null } </Consumer> ); } } } ... const requireAdmin = {...}; const AdminButton = protect(requireAdmin, Button); ... class App extends Component { render() { const { credentials } = this.props; return ( <Provider value={credentials}> ... <AdminButton> Add user </AdminButton> ... </Provider> ); } } 

अंतभाषण

यह विचार में ही एक संक्षिप्त विषयांतर था। इस विचार के आधार पर, एक मॉड्यूल लागू किया गया था ( github , npm ), जो अधिक दिलचस्प सुविधाएँ प्रदान करता है और एम्बेड करने के लिए आसान है (GADUB में README.md देखें और मॉड्यूल का उपयोग करके डेमो करें)।

केवल किसी कारण से मैं डेमो में निर्मित एनपीएम पैकेज प्राप्त करने में सक्षम नहीं था, इसलिए मुझे वहां मॉड्यूल कोड डालना पड़ा। लेकिन एनपीएम के माध्यम से स्थापित मॉड्यूल प्रतिक्रिया-आरबीएसी-गार्ड स्थानीय रूप से काम करता है (क्रोम 69.0.3497.100)। मुझे संदेह है कि समस्या बिल्ड मेथड में है - मैंने पैकेज को कॉपी किया। json और webpack.config.prod.js एक समान उद्देश्य के साथ मॉड्यूल से फाइलें।

चूंकि मैं फ्रंट-एंड डेवलपर नहीं हूं, इसलिए अभी भी बहुत सारे अधूरे काम हैं (परीक्षणों की कमी, https://codesandbox.io में अक्षमता और, संभवतः, अन्य छूटे हुए बिंदु)। इसलिए, यदि टिप्पणी, सुझाव या अनुरोध हैं, तो स्वागत है!

PPS: README.md सहित वर्तनी के बारे में सभी टिप्पणियां, व्यक्तिगत संदेश या पुल अनुरोध के रूप में भेजें।