2012-12-14 16 views
12

मेरे पास एक मूल PHP ऐप है, जहां उपयोगकर्ता लॉगिन HTTP सत्र में संग्रहीत है। एप्लिकेशन एक मुख्य टेम्पलेट, कि उप दृश्य ngView का उपयोग कर चले जाते हैं, इसअनधिकृत उपयोगकर्ताओं के लिए AngularJS ngView के साथ टेम्पलेट्स को कैसे छुपाएं?

<body ng-controller='MainCtrl'> 
    <div ng-view></div> 
</body> 

अब, यह मुख्य टेम्पलेट बुनियादी पीएचपी नियंत्रण के माध्यम से संरक्षित किया जा सकता है जैसे index.html कहते हैं, नहीं है, लेकिन मैं उप टेम्पलेट्स (यानी उपयोगकर्ता सूची, उपयोगकर्ता जोड़ें, उपयोगकर्ता को संपादित करें, आदि) जो कि सादे एचटीएमएल फाइलें हैं, जो मेरी रूट सेटिंग्स के अनुसार कोणीय से शामिल हैं।

जबकि मैं http सेवाओं के अनुरोध से संबंधित चिंता के लिए जांच करने में सक्षम हूं, एक उपयोगकर्ता उप-टेम्पलेट यूआरएल पर नेविगेट करने और इसे एक्सेस करने में सक्षम है। मैं इसे कैसे होने से रोक सकता हूं? http://docs.angularjs.org/guide/dev_guide.services.creating_services

यह सेवा अपने सभी नियंत्रकों है कि आप routeParams के साथ पंजीकृत द्वारा इंजेक्शन निर्भरता हो सकता है:

+0

क्या आप अनधिकृत उपयोगकर्ताओं से उप-टेम्पलेट्स को बस छिपाना चाहते हैं या आप उन्हें टेम्पलेट को जानने से रोकने की कोशिश कर रहे हैं? –

+0

दोनों चीजें सबसे अच्छा लक्ष्य होगा। – brazorf

उत्तर

14

मैं इस तरह एक सेवा बनाना होगा मुख्य/रूट नियंत्रक $locationChangeStart घटनाओं के लिए सुनो:

app.controller('AppController', ['$scope', '$route', '$routeParams', '$location', 'routeAuths', 
    function(scope, route, routeParams, location, routeAuths) { 
    scope.route = route; 
    scope.routeParams = routeParams; 
    scope.location = location; 

    scope.routeAuth = { 
    }; 

    scope.$on('$locationChangeStart', function(event, newVal, oldVal) { 
     var routeAuth = routeAuths.get(location.path()); 
     if (routeAuth.access === 'restricted') { 
     if (scope.routeAuth.allowed) { 
      event.preventDefault(); 
     } 
     else { 
      //if the browser navigates with a direct url that is restricted 
      //redirect to a default 
      location.url('/main'); 
     } 
     scope.routeAuth.restricted = routeAuth; 
     } 
     else { 
     scope.routeAuth.allowed = routeAuth; 
     scope.routeAuth.restricted = undefined; 
     } 
    }); 

}]); 

डेमो:

संदर्भ:

अद्यतन:

ताकि पूरी तरह से एचटीएमएल टेम्पलेट उपयोग रोकने के लिए तो यह सबसे अच्छा के रूप में अच्छी सर्वर पर किया जाता है में।चूंकि आप सर्वर पर एक स्थिर फ़ोल्डर से एचटीएमएल की सेवा करते हैं, तो उपयोगकर्ता सीधे फ़ाइल को एक्सेस कर सकता है: root_url/templates/template1.html इस प्रकार कोणीय परीक्षक को बाधित करता है।

+0

यह एक अच्छा समाधान प्रतीत होता है, लेकिन यदि उपयोगकर्ता http: //srv/sub-templates-dir/template1.html पर नेविगेट करता है, तो वह अभी भी टेम्पलेट लोड करने में सक्षम है। क्या यह जांच सर्वर की तरफ लागू की जानी चाहिए? – brazorf

+0

कार्यान्वयन सिर्फ पथ के लिए समानता की जांच करता है, लेकिन आप एक जटिल जटिल प्रणाली को कार्यान्वित कर सकते हैं। मैंने अपना जवाब अपडेट किया। –

+0

@LiviuT। बस पूछना चाहता हूं कि मैं मार्ग को बाईपास करने में सक्षम कैसे हूं, कहें कि उपयोगकर्ता ने सफलतापूर्वक प्रमाणीकृत किया है कि वह टेम्पलेट 1 को देखने में सक्षम होना चाहिए। मैं रूटकैस को प्रतिबंधित से प्रतिबंधित कैसे बदलूं? –

0

आप उन्हें उस पृष्ठ पर जाकर से अवरोधित करना चाहते हैं एक सेवा पैदा करते हैं।

सेवा में आप एक ऐसा फ़ंक्शन देख सकते हैं जो यह देखने के लिए जांच करेगा कि क्या व्यक्ति लॉग इन है या नहीं और फिर http://docs.angularjs.org/api/ng का उपयोग करके उन्हें फिर से रूट करें (लॉगिन पृष्ठ पर वापस?)। $ Location # path। इसलिए जैसे नियंत्रकों में से प्रत्येक में इस समारोह कॉल करें:

function myController(myServiceChecker){ 
    myServiceChecker.makeSureLoggedIn(); 
} 

makeSureLoggedIn समारोह की जांच करेगा कि क्या वर्तमान यूआरएल वे कम से ($ location.path का प्रयोग करके) कर रहे हैं और अगर यह एक वे करने की अनुमति नहीं है, अनुप्रेषित उन्हें एक ऐसे पृष्ठ पर वापस जाना है जिसे उन्हें होने की अनुमति है।

मुझे यह जानने में दिलचस्पी होगी कि क्या मार्गों को फायरिंग से रोकने के लिए कोई तरीका है, लेकिन कम से कम यह आपको वही करने देगा जो आप चाहते हैं।

संपादित करें: इसके अलावा मेरे इस सवाल का जवाब यहाँ देख, तो आप उन्हें भी पेज में जाने से रोका जा सकता है:

app.factory('routeAuths', [ function() { 
    // any path that starts with /template1 will be restricted 
    var routeAuths = [{ 
     path : '/template1.*', 
     access : 'restricted' 
    }]; 
    return { 
    get : function(path) { 
     //you can expand the matching algorithm for wildcards etc. 
     var routeAuth; 
     for (var i = 0; i < routeAuths.length; i += 1) { 
     routeAuth = routeAuths[i]; 
     var routeAuthRegex = new RegExp(routeAuth.path); 
     if (routeAuthRegex.test(path)) { 
      if (routeAuth.access === 'restricted') { 
      return { 
       access : 'restricted', 
       path : path 
      }; 
      } 
     } 
     } 
     // you can also make the default 'restricted' and check only for 'allowed' 
     return { 
     access : 'allowed', 
     path : path 
     }; 
    } 
    }; 
} ]); 

और में:

AngularJS - Detecting, stalling, and cancelling route changes