AngularJS में भूमिका आधारित प्राधिकरण को कैसे संभालें?

Question

मैं एक वेब ऐप बना रहा हूं जो उपयोगकर्ताओं के लिए दो आवश्यकताओं को पूरा करेगा। नोट: मैं एक वेब विकास मंच के रूप में AngularJS के लिए नया हूँ।

फ़्रंट-एंड -1: यह एक खोज कार्यक्षमता है जहां उपयोगकर्ता कीवर्ड खोज और फ़िल्टर के आधार पर विशिष्ट दस्तावेज़ों और अध्ययनों की खोज कर सकते हैं। यह डेटा लाने और AngularJS का उपयोग करके प्रदर्शित करने के लिए MySQL का उपयोग करके कार्यान्वित किया गया है।

फ़्रंट-एंड -2: उपयोगकर्ताओं के पास वेब ऐप पर खाता बनाने का विकल्प होगा। खाते का उद्देश्य है:

1. उनके खोज क्वेरी सहेजें।
2. यदि व्यवस्थापक प्रत्येक उपयोगकर्ता को एक विशिष्ट भूमिका के साथ जोड़ता है, तो उन उपयोगकर्ताओं को डेटाबेस में मौजूद दस्तावेज़ों को संशोधित करने के साथ-साथ नए दस्तावेज़ अपलोड करने और अन्य पृष्ठों की मेजबानी जैसे अतिरिक्त विकल्पों तक पहुंच प्राप्त होगी।

मेरा प्रश्न:

कैसे AngularJS में भूमिका आधारित प्राधिकरण को संभालने के लिए? मैं एक रूपरेखा जो निम्नलिखित कार्यक्षमताओं शामिल बनाने का तरीका यह पता लगाने में सक्षम नहीं हूँ: - उन पृष्ठों या कार्यक्षमताओं जो उन भूमिकाओं

मैं पढ़ लिया है साथ संबद्ध नहीं हैं तक पहुँचने से रोकें - उपयोगकर्ता एक भूमिका के लिए उन्हें से जुड़े मिल कुछ SO लेखों के साथ-साथ ट्यूटोरियल पर भी, लेकिन प्रत्येक ट्यूटोरियल लेखक के साथ समाप्त होता है कि भूमिका आधारित प्राधिकरण को सर्वर की ओर से संभाला जाना चाहिए और मैं समझता हूं कि यह सच क्यों है।

यह बहुत अच्छा होगा अगर कोई मुझे ट्यूटोरियल या लिखने के लिए इंगित कर सकता है जिसमें अंगुलरजेएस के लिए सर्वर पक्ष पर भूमिका-आधारित प्राधिकरण लागू किया गया है।

धन्यवाद!

Answer 1

मैं बैकएंड के साथ-साथ फ्रंटेंड पर भूमिका आधारित प्राधिकरण का उपयोग करता हूं। आप यूआई रूटर का उपयोग करें, निश्चित रूप से इसे बाहर की जाँच अगर

लिंक समाप्त हो

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

---

संपादित करें: कुछ कोड जोड़ना।

सबसे पहले, आपको कहीं भी उपयोगकर्ता की अनुमतियां संग्रहीत करने की आवश्यकता है, उदा।उपयोगकर्ता वस्तु localStorage में श्रृंखलाबद्ध पर:

{"id":1,"name":"user","created_at":"2016-04-17 18:58:19","gender":"m","roles":["admin"]} 

उसके बाद, आप दो महत्वपूर्ण भाग होते हैं:

• निर्देश - निर्धारित करने के लिए करता है, तो तत्व सौंपा अनुमति
• सेवा के आधार पर दिखाई दे या नहीं होना चाहिए - संभाल करने प्राधिकरण जाँच

निर्देशक:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .directive('access', access); 

    /** @ngInject */ 
    function access(authorization) { 
    var directive = { 
     restrict: 'A', 
     link: linkFunc, 
    }; 

    return directive; 

    /** @ngInject */ 
    function linkFunc($scope, $element, $attrs) { 
     var makeVisible = function() { 
     $element.removeClass('hidden'); 
     }; 

     var makeHidden = function() { 
     $element.addClass('hidden'); 
     }; 

     var determineVisibility = function (resetFirst) { 
     var result; 

     if (resetFirst) { 
      makeVisible(); 
     } 

     result = authorization.authorize(true, roles, $attrs.accessPermissionType); 

     if (result === authorization.constants.authorised) { 
      makeVisible(); 
     } else { 
      makeHidden(); 
     } 
     }; 

     var roles = $attrs.access.split(','); 

     if (roles.length > 0) { 
      determineVisibility(true); 
     } 
    } 
    } 

})(); 

आपको अपना सीएसएस सेट करने की आवश्यकता है ताकि कक्षा hidden वाले तत्व दिखाई न दें।

सेवा:,

<a ui-sref="app.administration" class="btn btn-primary pull-right" access="admin">Administration</a> 

बेशक

यह केवल डोम में तत्व को छिपाने जाएगा ताकि आप कार्य करना होगा:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .factory('authorization', authorization); 

    /** @ngInject */ 
    function authorization($rootScope) { 
    var service = { 
     authorize: authorize, 
     constants: { 
     authorised: 0, 
     loginRequired: 1, 
     notAuthorised: 2 
     } 
    }; 

    return service; 

    function authorize(loginRequired, requiredPermissions, permissionCheckType) { 
     var result = service.constants.authorised, 
      user = $rootScope.currentUser, 
      loweredPermissions = [], 
      hasPermission = true, 
      permission; 

     permissionCheckType = permissionCheckType || 'atLeastOne'; 

     if (loginRequired === true && user === undefined) { 
      result = service.constants.loginRequired; 

     } else if ((loginRequired === true && user !== undefined) && 
        (requiredPermissions === undefined || requiredPermissions.length === 0)) { 
      result = service.constants.authorised; 

     } else if (requiredPermissions) { 

      loweredPermissions = []; 

      angular.forEach(user.roles, function (permission) { 
       loweredPermissions.push(permission.toLowerCase()); 
      }); 

      for (var i = 0; i < requiredPermissions.length; i += 1) { 
       permission = requiredPermissions[i].toLowerCase(); 

       if (permissionCheckType === 'combinationRequired') { 
        hasPermission = hasPermission && loweredPermissions.indexOf(permission) > -1; 
        // if all the permissions are required and hasPermission is false there is no point carrying on 
        if (hasPermission === false) { 
         break; 
        } 
       } else if (permissionCheckType === 'atLeastOne') { 
        hasPermission = loweredPermissions.indexOf(permission) > -1; 
        // if we only need one of the permissions and we have it there is no point carrying on 
        if (hasPermission) { 
         break; 
        } 
       } 
      } 

      result = hasPermission ? 
        service.constants.authorised : 
        service.constants.notAuthorised; 
     } 

     return result; 
    } 
    } 
})(); 

अब, आप के निर्देश का उपयोग कर सकते/छिपाने तत्व को दिखाने के लिए सर्वर पर प्रमाणीकरण जांच भी।

यह पहला भाग उपयोगकर्ता इंटरफ़ेस में तत्वों को दिखाने/छिपाने के लिए हल किया गया है लेकिन आप ऐप मार्गों की रक्षा भी कर सकते हैं।

मार्ग परिभाषा:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .config(routeConfig); 

    /** @ngInject */ 
    function routeConfig($stateProvider) { 
    $stateProvider 
     .state('app.dashboard', { 
     url: '/dashboard', 
     data: { 
      access: { 
      loginRequired: true 
      } 
     }, 
     templateUrl: 'template_path', 
     controller: 'DashboardController as vm' 
     } 
    } 
})(); 

और अब सिर्फ $stateChangeStart स्थिति में अनुमति की जांच

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .run(runBlock); 

    /** @ngInject */ 
    function runBlock($rootScope, $state, authorization) { 
    $rootScope.$on('$stateChangeStart', function(event, toState) { 
     // route authorization check 
     if (toState.data !== undefined && toState.data.access !== undefined) { 
     authorised = authorization.authorize(toState.data.access.loginRequired, 
              toState.data.access.requiredPermissions, 
              toState.data.access.permissionCheckType); 

     if (authorised === authorization.constants.loginRequired) { 
      event.preventDefault(); 
      $state.go('app.login'); 
     } else if (authorised === authorization.constants.notAuthorised) { 
      event.preventDefault(); 
      $state.go('app.dashboard'); 
     } 
     } 
    }); 
    } 

})();