उपयोगकर्ता भूमिका

Question

के आधार पर कुछ प्रतिक्रिया घटक बच्चों को छुपाएं मैं प्रतिक्रिया और रेडक्स (एक नोड.जेएस बैकएंड के साथ) में एक एकल पृष्ठ एप्लिकेशन लिख रहा हूं।

मैं भूमिका-आधारित पहुंच नियंत्रण को कार्यान्वित करना चाहता हूं और ऐप के कुछ हिस्सों (या उप-भागों) के प्रदर्शन को नियंत्रित करना चाहता हूं।

मैं Node.js, जो सिर्फ इस तरह के संरचना के साथ एक वस्तु है से अनुमति सूची प्राप्त करने के लिए जा रहा हूँ:

{ 
    users: 'read', 
    models: 'write', 
    ... 
    dictionaries: 'none', 
} 

कुंजी सुरक्षित है संसाधन,

मूल्य उपयोगकर्ता की अनुमति है इस संसाधन के लिए (none, read, write) में से एक।

मैं इसे रेडक्स राज्य में संग्रहीत कर रहा हूं। काफी आसान लगता है।

none अनुमति react-router मार्ग onEnter/onChange हुक या redux-auth-wrapper द्वारा चेक की जाएगी। यह भी आसान लगता है।

लेकिन किसी भी घटक दृश्य के लिए read/write अनुमतियों को लागू करने का सबसे अच्छा तरीका क्या है (उदाहरण के लिए यदि मॉडल { models: 'read' } अनुमति है तो मॉडल मॉडल में संपादन बटन छुपाएं)।

मैं this solution पाया है और यह मेरे काम के लिए थोड़ा बदलने के लिए:

class Check extends React.Component { 
    static propTypes = { 
    resource: React.PropTypes.string.isRequired, 
    permission: React.PropTypes.oneOf(['read', 'write']), 
    userPermissions: React.PropTypes.object, 
    }; 

    // Checks that user permission for resource is the same or greater than required 
    allowed() { 
    const permissions = ['read', 'write']; 
    const { permission, userPermissions } = this.props; 
    const userPermission = userPermissions[resource] || 'none'; 

    return permissions.indexOf(userPermission) >= permissions.indexOf(permission) 
    } 

    render() { 
    if (this.allowed()) return { this.props.children }; 
    } 
} 

export default connect(userPermissionsSelector)(Check) 

जहां userPermissionsSelector कुछ इस तरह होगा: (store) => store.userPermisisons और उपयोगकर्ता की अनुमति वस्तु देता है।

फिर Check साथ संरक्षित तत्व लपेट:

<Check resource="models" permission="write"> 
    <Button>Edit model</Button> 
</Check> 

इसलिए यदि उपयोगकर्ता models के लिए write अनुमति बटन प्रदर्शित नहीं किया जाएगा नहीं है।

क्या किसी ने ऐसा कुछ किया है? क्या इससे कहीं अधिक "सुरुचिपूर्ण" समाधान है?

धन्यवाद!

पीएस बेशक सर्वर की अनुमति भी सर्वर की ओर से जांच की जाएगी।

Answer 1

ठीक है मुझे लगता है कि मैं समझ गया कि आप क्या चाहते हैं। मैंने ऐसा कुछ किया है जो मेरे लिए काम करता है और मुझे जिस तरह से यह पसंद है, लेकिन मैं समझता हूं कि अन्य व्यावहारिक समाधान वहां हैं।

जो मैंने लिखा वह एक एचओसी प्रतिक्रिया-राउटर शैली थी।

असल में मेरे पास अनुमतियां प्रदाता है जहां मैं उपयोगकर्ताओं की अनुमतियों को init करता हूं। मेरे पास है जिसमें एचओसी है जो मैंने पहले मेरे घटक में प्रदान की गई अनुमतियों को इंजेक्ट करता है।

इसलिए यदि मुझे कभी भी उस विशिष्ट घटक में अनुमतियों की जांच करने की आवश्यकता है तो मैं उन्हें आसानी से एक्सेस कर सकता हूं।

// PermissionsProvider.js 
import React, { Component } from "react"; 
import PropTypes from "prop-types"; 
import hoistStatics from "hoist-non-react-statics"; 

class PermissionsProvider extends React.Component { 
    static propTypes = { 
    permissions: PropTypes.array.isRequired, 
    }; 

    static contextTypes = { 
    permissions: PropTypes.array, 
    }; 

    static childContextTypes = { 
    permissions: PropTypes.array.isRequired, 
    }; 

    getChildContext() { 
    // maybe you want to transform the permissions somehow 
    // maybe run them through some helpers. situational stuff 
    // otherwise just return the object with the props.permissions 
    // const permissions = doSomething(this.props.permissions); 
    // maybe add some validation methods 
    return { permissions: this.props.permissions }; 
    } 

    render() { 
    return React.Children.only(this.props.children); 
    } 
} 

const withPermissions = Component => { 
    const C = (props, context) => { 
    const { wrappedComponentRef, ...remainingProps } = props; 

    return (
     <Component permissions={context.permissions} {...remainingProps} ref={wrappedComponentRef} /> 
    ); 
    }; 

    C.displayName = `withPermissions(${Component.displayName || Component.name})`; 
    C.WrappedComponent = Component; 
    C.propTypes = { 
    wrappedComponentRef: PropTypes.func 
    }; 

    C.contextTypes = { 
    permissions: PropTypes.array.isRequired 
    }; 

    return hoistStatics(C, Component); 
}; 

export { PermissionsProvider as default, withPermissions }; 

ठीक है मुझे पता है कि यह बहुत कोड है। लेकिन ये एचओसी हैं (आप अधिक here सीख सकते हैं)।

एक उच्च-आदेश घटक (एचओसी) घटक तर्क का पुन: उपयोग करने के लिए प्रतिक्रिया में एक उन्नत तकनीक है। एचओसी प्रति प्रतिक्रिया एपीआई का हिस्सा नहीं हैं, प्रति से। वे एक पैटर्न हैं जो प्रतिक्रिया की रचनात्मक प्रकृति से उभरते हैं। कंक्रीटली, एक उच्च-आदेश घटक एक ऐसा फ़ंक्शन है जो घटक लेता है और एक नया घटक देता है।

असल में मैंने ऐसा इसलिए किया क्योंकि मैं प्रतिक्रिया-राउटर द्वारा प्रेरित था। जब भी आप कुछ रूटिंग सामग्री जानना चाहते हैं तो आप सजावटी @withRouter जोड़ सकते हैं और वे आपके घटक में प्रोप इंजेक्ट कर सकते हैं। तो एक ही चीज़ क्यों नहीं करते?

1. सबसे पहले आप सेटअप प्रदाता के साथ अनुमतियाँ
2. तो फिर तुम withPermissions डेकोरेटर घटक है कि अनुमतियों

---

//App render 
return (
    <PermissionsProvider permissions={permissions}> 
     <SomeStuff /> 
    </PermissionsProvider> 
); 

कहीं अंदर

SomeStuff जाँच पर उपयोग करना चाहिए आपके पास व्यापक रूप से फैला हुआ टूलबार है जो अनुमतियों की जांच करता है?

https://codesandbox.io/s/lxor8v3pkz

नोट::

@withPermissions 
export default class Toolbar extends React.Component { 
    render() { 
    const { permissions } = this.props; 

    return permissions.canDoStuff ? <RenderStuff /> : <HeCantDoStuff />; 
    } 
} 

आप सज्जाकार उपयोग नहीं कर सकते, तो आप इस

export default withPermissions(Toolbar); 

यहाँ की तरह टूलबार निर्यात एक codesandbox जहां मैं इसे व्यवहार में पता चला है

• मैंने वास्तव में अनुमतियों को वास्तव में सरल बना दिया क्योंकि वह तर्क आपके अंत से आता है और डेमो उद्देश्यों के लिए मैंने उन्हें सरल बना दिया।
• मुझे लगता है कि अनुमतियां एक सरणी थीं इसलिए मैं एचओसी
• में PropTypes.array की जांच करता हूं यह वास्तव में लंबा और जटिल उत्तर है और मैंने अपनी सर्वोत्तम क्षमता पर स्पष्ट करने की कोशिश की। कृपया मुझे यहां और वहां कुछ गलतियों के लिए ग्रिल न करें :)