Angulare UI-Router Login-Authentifizierung

Ich bin in den Prozess der Herstellung ein schöner demo-als auch die Reinigung einiger dieser Leistungen in ein verwendbares Modul, aber hier ist, was ich mir ausgedacht habe. Dies ist ein komplexer Prozess zu umgehen, einige Punkte zu beachten, so hängen dort. Sie müssen zu brechen diese nach unten in mehrere Stücke.

Werfen Sie einen Blick auf diese plunk.

Erste, Sie brauchen einen service zum speichern der Identität des Benutzers. Ich nenne diese principal. Es kann überprüft werden, ob der Benutzer angemeldet ist, und auf Wunsch können Sie die Lösung eines Objekts darstellt, der wesentliche Informationen über die Identität des Benutzers. Dies kann sein, was Sie brauchen, aber der essentials wäre ein display-Namen, einen Benutzernamen zu erstellen, eventuell eine E-Mail, und die Rollen eines Benutzers (wenn dies für Ihre app). Principal hat auch Methoden, um die Rolle überprüft.

.factory('principal', ['$q', '$http', '$timeout',
  function($q, $http, $timeout) {
    var _identity = undefined,
      _authenticated = false;

    return {
      isIdentityResolved: function() {
        return angular.isDefined(_identity);
      },
      isAuthenticated: function() {
        return _authenticated;
      },
      isInRole: function(role) {
        if (!_authenticated || !_identity.roles) return false;

        return _identity.roles.indexOf(role) != -1;
      },
      isInAnyRole: function(roles) {
        if (!_authenticated || !_identity.roles) return false;

        for (var i = 0; i < roles.length; i++) {
          if (this.isInRole(roles[i])) return true;
        }

        return false;
      },
      authenticate: function(identity) {
        _identity = identity;
        _authenticated = identity != null;
      },
      identity: function(force) {
        var deferred = $q.defer();

        if (force === true) _identity = undefined;

        //check and see if we have retrieved the 
        //identity data from the server. if we have, 
        //reuse it by immediately resolving
        if (angular.isDefined(_identity)) {
          deferred.resolve(_identity);

          return deferred.promise;
        }

        //otherwise, retrieve the identity data from the
        //server, update the identity object, and then 
        //resolve.
        //          $http.get('/svc/account/identity', 
        //                    { ignoreErrors: true })
        //               .success(function(data) {
        //                   _identity = data;
        //                   _authenticated = true;
        //                   deferred.resolve(_identity);
        //               })
        //               .error(function () {
        //                   _identity = null;
        //                   _authenticated = false;
        //                   deferred.resolve(_identity);
        //               });

        //for the sake of the demo, fake the lookup
        //by using a timeout to create a valid
        //fake identity. in reality,  you'll want 
        //something more like the $http request
        //commented out above. in this example, we fake 
        //looking up to find the user is
        //not logged in
        var self = this;
        $timeout(function() {
          self.authenticate(null);
          deferred.resolve(_identity);
        }, 1000);

        return deferred.promise;
      }
    };
  }
])

Zweite, benötigen Sie einen Dienst, prüft den Zustand der Benutzer gehen möchte, macht Sie sicher, dass Sie eingeloggt sind (falls notwendig; nicht notwendig für signin, Passwort-reset, etc.), und dann spielt eine Rolle prüfen (wenn die app braucht diese). Wenn Sie nicht authentifiziert sind, sendet Sie an die sign-in-Seite. Wenn Sie authentifiziert sind, aber nicht, eine Rolle zu überprüfen, senden Sie eine access-denied Seite. Ich nenne das service authorization.

.factory('authorization', ['$rootScope', '$state', 'principal',
  function($rootScope, $state, principal) {
    return {
      authorize: function() {
        return principal.identity()
          .then(function() {
            var isAuthenticated = principal.isAuthenticated();

            if ($rootScope.toState.data.roles
                && $rootScope.toState
                             .data.roles.length > 0 
                && !principal.isInAnyRole(
                   $rootScope.toState.data.roles))
            {
              if (isAuthenticated) {
                  //user is signed in but not
                  //authorized for desired state
                  $state.go('accessdenied');
              } else {
                //user is not authenticated. Stow
                //the state they wanted before you
                //send them to the sign-in state, so
                //you can return them when you're done
                $rootScope.returnToState
                    = $rootScope.toState;
                $rootScope.returnToStateParams
                    = $rootScope.toStateParams;

                //now, send them to the signin state
                //so they can log in
                $state.go('signin');
              }
            }
          });
      }
    };
  }
])

Alles was Sie jetzt tun müssen, ist Zuhören ui-router's $stateChangeStart. Dies gibt Ihnen die Möglichkeit zu untersuchen, den ist-Zustand, den Zustand, den Sie gehen möchten, und legen Sie Ihre Berechtigung überprüfen. Wenn es fehlschlägt, können Sie die cancel route-übergang, oder wechseln Sie zu einer anderen route.

.run(['$rootScope', '$state', '$stateParams', 
      'authorization', 'principal',
    function($rootScope, $state, $stateParams, 
             authorization, principal)
{
      $rootScope.$on('$stateChangeStart', 
          function(event, toState, toStateParams)
      {
        //track the state the user wants to go to; 
        //authorization service needs this
        $rootScope.toState = toState;
        $rootScope.toStateParams = toStateParams;
        //if the principal is resolved, do an 
        //authorization check immediately. otherwise,
        //it'll be done when the state it resolved.
        if (principal.isIdentityResolved()) 
            authorization.authorize();
      });
    }
  ]);

Der knifflige Teil an der Verfolgung der Identität eines Benutzers ist suchen Sie, wenn Sie bereits authentifiziert ist (sagen wir, Sie besuchen die Seite nach einer vorherigen Sitzung gespeichert und ein auth-token in einem cookie, oder vielleicht hat Sie es schwer, aktualisiert eine Seite, oder ließ sich auf einen URL von einem link). Aufgrund der Art und Weise ui-router Werke, die Sie tun müssen, um Ihre Identität zu lösen, einmal, bevor Sie Ihren auth-Prüfungen. Sie können dies tun, mit der resolve option in Ihrem Staat config. Ich habe einen übergeordneten Staat für die Website ist, dass alle Staaten Erben, die zwingt den AUFTRAGGEBER behoben werden, bevor etwas anderes passiert.

$stateProvider.state('site', {
  'abstract': true,
  resolve: {
    authorize: ['authorization',
      function(authorization) {
        return authorization.authorize();
      }
    ]
  },
  template: '<div ui-view />'
})

Es gibt ein anderes problem hier... resolve wird nur einmal aufgerufen. Sobald Ihre Versprechen für die Identität lookup abgeschlossen, es wird nicht ausgeführt, die zu beheben Delegierten wieder. Also wir haben zu tun, Ihre auth-Kontrollen an zwei Orten: einmal gemäß Ihrer Identität Versprechen der Lösung in resolve deckt das erste mal, lädt Ihre app, und einmal in $stateChangeStart wenn die Auflösung schon getan hat, was deckt Sie jederzeit navigieren Staaten.

OK, also was haben wir bisher getan?

1. Wir überprüfen, um zu sehen, wenn die app lädt, wenn der Benutzer angemeldet ist.
2. Wir track-Informationen über den eingeloggten Benutzer.
3. Wir leiten Sie Sie auf sign in Staat, für Staaten, die erfordern, dass der Benutzer angemeldet werden.
4. Wir leiten Sie Sie auf ein "Zugriff verweigert" - Zustand, wenn Sie nicht zum Zugriff berechtigt sind.
5. Wir haben einen Mechanismus, um Benutzer umleiten zurück in den ursprünglichen Zustand, Sie angefordert haben, wenn wir Sie brauchten, um sich anzumelden.
6. Wir können melden Sie einen Benutzer aus (muss verdrahtet werden, bis Sie im zusammenspiel mit einer client-oder server-code, verwaltet Ihre auth-ticket).
7. Wir nicht senden müssen Benutzer zurück auf die Anmelde-Seite jedes mal, wenn Sie laden Ihren browser oder Tropfen auf einen link.

Wohin gehen wir von hier? Gut, können Sie organisieren Ihre Staaten in Regionen, die eine Anmeldung erfordern. Sie können verlangen, authentifiziert/autorisiert Benutzer, indem data mit roles auf diese Staaten (oder ein Elternteil von Ihnen, wenn Sie möchten, verwenden Sie Vererbung). Hier beschränken wir uns eine Ressource für die Admins:

.state('restricted', {
    parent: 'site',
    url: '/restricted',
    data: {
      roles: ['Admin']
    },
    views: {
      'content@': {
        templateUrl: 'restricted.html'
      }
    }
  })

Nun können Sie Steuern, vom Staat-was können die Benutzer den Zugriff auf eine route. Sonstige Anliegen? Vielleicht unterschiedlich, nur ein Teil einer Ansicht basierend auf, ob oder nicht Sie sind angemeldet? Kein problem. Verwenden Sie die principal.isAuthenticated() oder sogar principal.isInRole() mit einer der zahlreichen Möglichkeiten, die Sie können, bedingt anzeigen einer Vorlage oder einem element.

Ersten, injizieren principal in einen controller oder was auch immer, und kleben Sie es um den Umfang, so können Sie es einfach in Ihre Ansicht:

.scope('HomeCtrl', ['$scope', 'principal', 
    function($scope, principal)
{
  $scope.principal = principal;
});

Ein-oder ausblenden eines Elements:

<div ng-show="principal.isAuthenticated()">
   I'm logged in
</div>
<div ng-hide="principal.isAuthenticated()">
  I'm not logged in
</div>

Etc., , und so weiter. Na ja, in deinem Beispiel-app, Sie wäre ein Staat für die home-Seite, die lassen den nicht authentifizierten Benutzer vorbei. Hätten Sie links auf sign in oder sign-up-Zustände, oder haben die Formen eingebaut in diese Seite. Was auch immer zu Ihnen passt.

Den dashboard-Seiten können alle Erben von einem Staat erfordert, dass der Benutzer angemeldet sein, und, sagen wir, ein User Rolle Mitglied. Alle die Autorisierung Sachen, die wir besprochen haben, würde das fließen von dort.

InformationsquelleAutor der Antwort HackedByChinese

Die einfachste Lösung ist die Verwendung $stateChangeStart und event.preventDefault() zum Abbrechen der Zustand ändern, wenn der Benutzer nicht authentifiziert ist, und leiten ihn an die auth Staat, der die login-Seite.

angular
  .module('myApp', [
    'ui.router',
  ])
    .run(['$rootScope', 'User', '$state',
    function ($rootScope, User, $state) {
      $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
        if (toState.name !== 'auth' && !User.authenticaded()) {
          event.preventDefault();
          $state.go('auth');
        }
      });
    }]
  );

InformationsquelleAutor der Antwort sebest

Habe ich das Modul um diese Prozess Stück Kuchen

Können Sie Sachen wie tun:

$routeProvider
  .state('secret',
    {
      ...
      permissions: {
        only: ['admin', 'god']
      }
    });

Oder auch

$routeProvider
  .state('userpanel',
    {
      ...
      permissions: {
        except: ['not-logged-in']
      }
    });

Es ist ganz neu, aber lohnt sich!

https://github.com/Narzerus/angular-permission

InformationsquelleAutor der Antwort Rafael Vidaurre

Hier ist, wie wir aus dem unendlichen routing-loop und noch verwendet werden $state.go statt $location.path

if('401' !== toState.name) {
  if (principal.isIdentityResolved()) authorization.authorize();
}

InformationsquelleAutor der Antwort Jason

Zuerst müssen Sie einen service, der Sie zu injizieren in Ihr Controller, der hat einige Idee, die app-Authentifizierung Zustand. Anhaltende auth-Daten mit local storage ist eine anständige Art und Weise zu nähern.

Als Nächstes müssen Sie überprüfen Sie den Zustand der auth rechts, bevor sich der Zustand ändert. Seit Ihrem app hat einige Seiten, die authentifiziert werden müssen und andere, die das nicht können, erstellen Sie eine übergeordnete route, die prüft, auth, und alle anderen Seiten, die verlangen, dass die gleichen sein, die ein Kind von diesem Elternteil.

Schließlich müssen Sie einige Weg, zu sagen, wenn der aktuell angemeldete Benutzer können bestimmte Operationen durchzuführen. Dies kann erreicht werden, indem eine 'kann' - Funktion, um Ihren auth-service. Können die zwei Parameter nimmt:
- action - required - (dh 'manage_dashboards' oder 'create_new_dashboard')
- Objekt - optional - Objekt betrieben wird, auf. Zum Beispiel, wenn Sie eine dashboard-Objekts, möchten Sie vielleicht überprüfen, um zu sehen, ob dashboard.ownerId === loggedInUser.id. (Natürlich, Informationen vom client übergeben sollte nie vertraut werden, und Sie sollten immer überprüfen Sie diese auf dem server vor dem schreiben in Ihrer Datenbank).

angular.module('myApp', ['ngStorage']).config([
   '$stateProvider',
function(
   $stateProvider
) {
   $stateProvider
     .state('home', {...}) //not authed
     .state('sign-up', {...}) //not authed
     .state('login', {...}) //not authed
     .state('authed', {...}) //authed, make all authed states children
     .state('authed.dashboard', {...})
}])
.service('context', [
   '$localStorage',
function(
   $localStorage
) {
   var _user = $localStorage.get('user');
   return {
      getUser: function() {
         return _user;
      },
      authed: function() {
         return (_user !== null);
      },
      //server should return some kind of token so the app 
      //can continue to load authenticated content without having to
      //re-authenticate each time
      login: function() {
         return $http.post('/login.json').then(function(reply) {
            if (reply.authenticated === true) {
               $localStorage.set(_userKey, reply.user);
            }
         });
      },
      //this request should expire that token, rendering it useless
      //for requests outside of this session
      logout: function() {
         return $http.post('logout.json').then(function(reply) {
            if (reply.authenticated === true) {
               $localStorage.set(_userKey, reply.user);
            }
         });
      },
      can: function(action, object) {
         if (!this.authed()) {
            return false;
         }

         var user = this.getUser();

         if (user && user.type === 'admin') {
             return true;
         }

         switch(action) {
            case 'manage_dashboards':
               return (user.type === 'manager');
         }

         return false;


      }
   }
}])
.controller('AuthCtrl', [
   'context', 
   '$scope', 
function(
   context, 
   $scope
) {
   $scope.$root.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
      //only require auth if we're moving to another authed page
      if (toState && toState.name.indexOf('authed') > -1) {
         requireAuth();
      }
   });

   function requireAuth() {
      if (!context.authed()) {
         $state.go('login');
      }
   }
}]

** DISCLAIMER: Der obige code ist pseudo-code und kommt mit keinerlei Garantien **

InformationsquelleAutor der Antwort colefner