2013-07-31 8 views
22

का उपयोग कर उपयोगकर्ता को लॉग इन या आउट करने के लिए सर्वोत्तम अभ्यास अभी है, मैं रेल पर रूबी के शीर्ष पर और प्रमाणीकरण के लिए डेविस का उपयोग करके एंगुलरजेएस आधारित एप्लिकेशन का निर्माण कर रहा हूं। जब कोई उपयोगकर्ता सफलतापूर्वक प्रमाणित करता है और प्रमाणीकरण विफल होने पर सर्वर ठीक से प्रतिक्रिया दे रहा है। मुझे लगता है कि मेरा प्रश्न है, $ cookieStore का उपयोग करके, यह जानने के लिए सबसे अच्छा अभ्यास क्या है कि उपयोगकर्ता लॉग इन है या नहीं? एक कुकी है जिसे "myapp_session" नामक रेल द्वारा सेट किया जाता है, लेकिन उस सत्र का अर्थ यह नहीं है कि उपयोगकर्ता लॉग इन है। उपयोगकर्ता ऑनलाइन/ऑफलाइन प्रबंधन को रखने के लिए AngularJS का उपयोग करने के तरीकों की तलाश में। मैं अभी भी यह सुनिश्चित कर दूंगा कि अनुरोध के बिना प्राधिकरण की आवश्यकता वाले बैकएंड द्वारा अधिकृत अनुरोध प्राप्त करें।कुकीजस्टोर और एंगुलरजेएस

उत्तर

37

आप एक निर्देश बना सकते हैं जो एप्लिकेशन लोड होने पर लॉग उपयोगकर्ता सेट अप करता है, उदाहरण के लिए, आपके सर्वर पर वर्तमान उपयोगकर्ता सत्र का अनुरोध करता है।

angular.module('Auth', [ 
     'ngCookies' 
    ]) 
    .factory('Auth', ['$cookieStore', function ($cookieStore) { 

     var _user = {}; 

     return { 

      user : _user, 

      set: function (_user) { 
       // you can retrive a user setted from another page, like login sucessful page. 
       existing_cookie_user = $cookieStore.get('current.user'); 
       _user = _user || existing_cookie_user; 
       $cookieStore.put('current.user', _user); 
      }, 

      remove: function() { 
       $cookieStore.remove('current.user', _user); 
      } 
     }; 
    }]) 
; 

और अपने run विधि में सेट AppController में:

.run(['Auth', 'UserRestService', function run(Auth, UserRestService) { 

      var _user = UserRestService.requestCurrentUser(); 
      Auth.set(_user); 
     }]) 

बेशक सर्वर से किसी भी अनुरोध एक Http Status 401 - Unauthorized वापसी अगर, आप कुकी से उपयोगकर्ता को हटाने और रीडायरेक्ट करने के लिए Auth.remove() सेवा को कॉल करने की जरूरत है पृष्ठ लॉगिन करने के लिए उपयोगकर्ता।

मैं इस दृष्टिकोण का उपयोग करता हूं और बहुत अच्छी तरह से काम करता हूं। आप localStorage का भी उपयोग कर सकते हैं, लेकिन उपयोगकर्ता डेटा लंबे समय तक जारी रहेगा। जब तक आप इस प्रमाणीकरण के लिए समाप्ति तिथि निर्धारित नहीं करते हैं, तो मुझे सबसे अच्छा अभ्यास नहीं दिखता है।

हमेशा के लिए ध्यान रखें आपके सर्वर साइट पर उपयोगकर्ता प्रमाणिकता की पुष्टि =)

[संपादित करें]

401 - Unauthorized सर्वर प्रतिक्रिया सुनने के लिए, यदि आप अपने $http अनुरोध पर एक इंटरसेप्टर रख सकते हैं, जैसे इस:

.config(['$urlRouterProvider', '$routeProvider', '$locationProvider', '$httpProvider', function ($urlRouterProvider, $routeProvider, $locationProvider, $httpProvider) { 
     $urlRouterProvider.otherwise('/home'); 
     var interceptor = ['$location', '$q', function ($location, $q) { 

      function success(response) { 
       return response; 
      } 

      function error(response) { 

       if (response.status === 401) { 
        $location.path('/login'); 
        return $q.reject(response); 
       } 
       else { 
        return $q.reject(response); 
       } 
      } 

      return function (promise) { 
       return promise.then(success, error); 
      }; 
     }]; 

     $httpProvider.responseInterceptors.push(interceptor); 
    }]) 

401 प्रतिक्रिया के साथ हर कॉल, उपयोगकर्ता /login पा में पेज लॉगइन करने के लिए पुनः निर्देशित किया जाएगा वें।

आप तो इसकी जांच के लिए जब वे

.run(function($cookieStore) { 
    if ($cookieStore.get('logged-in') === some_value) { 
     let him enter 
    } 
    else { 
     you shall not pass 
    } 
}); 

वहाँ के साथ आपकी साइट में प्रवेश एक अच्छा उदाहरण here

+1

यह एक शानदार प्रतिक्रिया है। अंतर्दृष्टि के लिए धन्यवाद। यह उपयोगी रहा है। –

+1

मुझे इसके साथ 'अज्ञात प्रदाता: $ urlRouterProvider' के बारे में त्रुटि मिलती है। –

+0

क्या आप कोणीय v1.2 का उपयोग कर रहे हैं? –

4

आप

$cookieStore.put('logged-in', some_value) 

साथ अपना लॉगिन कॉलबैक पर कुकी सेट कर सकते हैं मिलेगा अधिक "सही" तरीके हो सकते हैं, लेकिन यह काम करता है।

2

आप स्वीकार किए जाते हैं जवाब काम करने समस्या हो रही है, सावधान रहना कोणीय 1.3 के रूप में, एक नए इंटरसेप्टर जोड़ने का एक उचित तरीके से $ httpProvider.interceptors में जोड़कर है कि, इसलिए बजाय:

$httpProvider.responseInterceptors.push(interceptor); 

उपयोग:

$httpProvider.interceptors.push(interceptor);