2012-11-20 9 views
16

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

समाधान मैं पुन: निर्देशन के लिए साथ आए हैं:

1 - एक सेवा OAuth कि जांच करेगा कि SessionID मौजूद है और यदि नहीं, तो प्रवेश पृष्ठ पर पुनर्निर्देश बनाएं जिसका नाम, सेवा भी प्रवेश के लिए जिम्मेदार है और लॉगआउट विधियों।

app.factory('OAuth', ['$http', function ($http) { 

    var _SessionID = ''; 

    return { 
     login: function() { 
      //Do login ans store sessionID in var _SessionID 
     }, 

     logout: function() { 
      //Do logout 
     }, 

     isLoggedIn: function() { 
      if(_SessionID) { 
       return true; 
      } 
      //redirect to login page if false 
     } 
    }; 

}]); 

2 - प्रत्येक नियंत्रक में नए OAuth सेवा सम्मिलित करें और देखें कि क्या उपयोगकर्ता isLoggedIn

app.controller('myCtrl', ['$scope', 'OAuth', function ($scope, OAuth) { 

    //check if user is logged 
    OAuth.isLoggedIn(); 

}]); 

सवाल:

1 - isLoggedIn() विधि सभी नियंत्रकों में बुलाया जाएगा, तो मुझे आश्चर्य है कि सेवा को इंजेक्ट किए बिना इसे करने का कोई तरीका है और इसे प्रत्येक नियंत्रक में कॉल करें।

2 - सत्र आईडी को स्टोर करने के लिए कुकी रखने के बजाय मैं इसे ओएथ के _SessionID चर में सहेजना चाहता हूं और प्रत्येक अनुरोध के लिए इसे सर्वर पर भेजना है। क्या यह एक व्यवहार्य/सुरक्षित दृष्टिकोण है? क्या आप मुझे इसके लिए कुछ विचार दे सकते हैं?

धन्यवाद!

उत्तर

8

मैं here शुरू करूंगा, विटॉल्ड ने इस शांत इंटरसेप्टर को बनाया है जो http प्रतिक्रियाओं से बाहर काम करता है। मैं इसका इस्तेमाल करता हूं और यह वास्तव में सहायक रहा है।

+0

नाइस में ठीक काम करता है। टिप दान के लिए धन्यवाद! – Bema

+1

[दृष्टिकोण के बारे में लिखना] (http://www.espeo.pl/2012/02/26/authentication-in-angularjs- अनुप्रयोग) भी बहुत उपयोगी है। –

9

मैं एक समान रणनीति का उपयोग करता हूं (सर्वर से 401 प्रतिक्रियाओं को रोकता हूं)। पूर्ण उदाहरण यहाँ देख सकते हैं: https://github.com/Khelldar/Angular-Express-Train-Seed

यह सत्र की दुकान के लिए बैकएंड पर नोड और mobgodb का उपयोग करता है और एक ग्राहक एक दान की तरह अनुरोध ऊपर लिंक पुन: प्रयास doens't उस पर http इंटरसेप्टर कांट छांट:

var interceptor = ['$q', '$location', '$rootScope', function ($q, $location, $rootScope) { 
     function success(response) { 
      return response; 
     } 

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

     return function (promise) { 
      return promise.then(success, error); 
     } 
    }]; 
    $httpProvider.responseInterceptors.push(interceptor); 
1

मेरे मामले में, मैं के साथ

  1. इंटरसेप्टर इस्तेमाल किया $ httpProvider
  2. config
  3. और $ खिड़की निर्भर ency, $ स्थान के रूप में बस मौजूदा यूआरएल के पथ को जोड़ दिया। क्या हुआ "http://www.tnote.me/#/api/auth" की तरह था, और यह की तरह "http://www.tnote.me/auth"

कोड स्निपेट इस तरह है बेने जाना चाहिए था।

noteApp = angular.module('noteApp', ['ngRoute', 'ngCookies']) 
    .factory('authInterceptor', ['$rootScope', '$q', '$cookies', '$window', 
    function($rootScope, $q, $cookies, $window) { 
     return { 
     request: function (req) { 
      req.headers = req.headers || {}; 
      if ($cookies.token) { 
      req.headers.Authorization = 'Bearer ' + $cookies.token; 
      } 

      return req; 
     }, 
     responseError: function (rejection) { 
      if (rejection.status == 401) { 
      $window.location = '/auth';  
      } 

      return $q.reject(rejection); 
     } 
     } 
    }]) 
    .config(['$routeProvider', '$httpProvider', function($httpProvider) { 
    $httpProvider.interceptors.push('authInterceptor'); 
    } 
    ]) 
0

इस काम करेंगे। यह अपने आवेदन

var interceptor = function ($q, $location) { 
     return { 
      request: function (config) {//req 
       console.log(config); 
       return config; 
      }, 

      response: function (result) {//res 
       console.log('Repos:'); 
       console.log(result.status); 
       return result; 
      }, 

      responseError: function (rejection) {//error 
       console.log('Failed with', rejection.status, 'status'); 
       if (rejection.status == 403) { 
        $location.url('/dashboard'); 
       } 

       return $q.reject(rejection); 
      } 
     } 
    }; 
    module.config(function ($httpProvider) { 
     $httpProvider.interceptors.push(interceptor); 
    }); 
संबंधित मुद्दे