Bewährte Methode, um sicherzustellen, dass Benutzer mit cookieStore und AngularJS an- und abgemeldet werden

Question

Momentan baue ich eine AngularJS-basierte Anwendung auf Ruby on Rails und verwende Devise zur Authentifizierung. Ich habe den Server richtig reagieren, wenn ein Benutzer erfolgreich authentifiziert und wenn die Authentifizierung fehlschlägt. Ich denke, meine Frage ist, mit $ cookieStore, was ist die beste Methode zu wissen, ob ein Benutzer angemeldet ist oder nicht? Es gibt ein Cookie, das von Rails als "myapp_session" gesetzt wird, aber diese Sitzung bedeutet nicht unbedingt, dass ein Benutzer angemeldet ist. Auf der Suche nach Ideen zur Verwendung von AngularJS, um die Benutzer online/offline zu verwalten. Ich werde weiterhin sicherstellen, dass Anfragen, die eine Autorisierung erfordern, unabhängig von der Lösung vom Backend autorisiert werden.

Answer 1

Sie können eine Direktive erstellen, die den angemeldeten Benutzer beim Laden der Anwendung einrichtet, beispielsweise um die aktuelle Benutzersitzung auf Ihrem Server anzufordern.

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); 
      } 
     }; 
    }]) 
; 

Und in Ihrer run Methode in AppController gesetzt:

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

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

Natürlich, wenn eine Anfrage an den Server ein Http Status 401 - Unauthorized zurückzukehren, müssen Sie den Auth.remove() Dienst anrufen, um den Benutzer von Cookies zu entfernen und umleiten die Anmeldeseite des Benutzers.

Ich benutze diesen Ansatz und funktioniert sehr gut. Sie können auch die localStorage verwenden, aber die Benutzerdaten werden für eine lange Zeit beibehalten. Sofern Sie kein Ablaufdatum für diese Authentifizierung festlegen, sehe ich keine optimale Vorgehensweise.

Beachten Sie überprüfen, immer die Anmeldeinformationen des Benutzers auf dem Server site =)

[EDIT]

Zum Anhören 401 - Unauthorized Server-Antwort, können Sie einen Abfangjäger auf $http Anfrage gestellt, wie dies:

.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); 
    }]) 

Jeder Anruf mit 401 Antwort, wird der Benutzer auf Login-Seite bei /login pa umgeleitet werden th.

Sie ein gutes Beispiel finden here

Answer 2

Sie das Cookie auf Ihrem Login Rückruf einstellen können mit

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

Sie prüfen, wenn sie Ihre Website mit

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

Dort geben könnte mehr "richtige" Wege sein, aber das funktioniert.

Answer 3

Wenn Sie Probleme machen die akzeptierte Antwort Arbeit haben, vorsichtig sein, dass ab Angular 1.3, eine richtige Art und Weise einen neuen Abfangjäger der Zugabe ist, indem es $ Zugabe httpProvider.interceptors, so statt:

$httpProvider.responseInterceptors.push(interceptor); 

Verwendung:

$httpProvider.interceptors.push(interceptor);