AngularJS yeni duyuyorum, ve ne kadar aşağıdaki senaryoda-uı-anguler yönlendirici kullanabilir miyim biraz kafam karıştı.

Uygulama iki bölümden oluşmaktadır bir web inşa ediyorum, ilk defa bu oturum açma ve kaydolma manzaralı ana ve ikinci pano (giriş yaptıktan sonra) başarılı olur.

'/' Ve '/' manzarası kaydolma oturum açma kolu ve uı-router açısal app config ile giriş bölümü için index.html yarattım ve uygulama ve uı-router config ile pano bölümü birçok alt görünümleri işlemek için başka bir dosya dashboard.html var

şimdi pano bölümü bitirdim ve farklı açısal kendi uygulamaları ile iki bölümleri birleştirmek için nasıl bilmiyorum. pano uygulamayı yönlendirmek eve app söyleyebilir miyim?

Güzel bir demo yapmak gibi kullanışlı bir modüle bu hizmetlerden bazıları temizlik sürecinde değilim, ama buraya kadar geldim. Bu yüzden dayan bazı uyarılar çözüm, karmaşık bir süreçtir. Bu birkaç parçaya kırmak gerekir.

Take a look at this plunk.

İlk olarak, kullanıcının kimliğini saklamak için hizmet gerekir. Bu principal diyorum. Eğer kullanıcı oturum olup olmadığını görmek için kontrol edilebilir ve talep üzerine, kullanıcının kimliği hakkında önemli bilgileri temsil eden bir nesne çözebilirsiniz. Bu ihtiyacınız olan her şey olabilir, ama temel bir görünen ad, kullanıcı adı, muhtemelen bir e-posta, ve bir kullanıcıya ait rolleri eğer bu uygulamanız için geçerliyse () olur. Müdür de rol kontrolleri yapmak için yöntemleri vardır.

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

İkinci olarak, kullanıcı giriş yapmış olduklarına emin yapar, gitmek istiyor, devletin gerekli; imzalıyorum, şifre için gerekli sıfırlama, vb.), kontrol eden bir servis gerekir ve o zaman rol bir kontrol edin eğer uygulamanız bu gerekiyorsa). Eğer doğrulanan değilse, oturum açma sayfası için onları göndermek. Eğer doğrulanan, ama bir rol denetimi başarısız, bir erişim engellendi sayfasına gönder. Bu hizmet authorization diyorum.

.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) $state.go('accessdenied'); // user is signed in but not authorized for desired state
              else {
                // user is not authenticated. stow the state they wanted before you
                // send them to the signin 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');
              }
            }
          });
      }
    };
  }
])

Şimdi yapmanız gereken tüm ui-router'30* s *. dinlemek. Bu, mevcut durumu, gitmek istedikleri devlet, incelemek ve yetkilendirme kontrol eklemek için bir şans verir. Eğer başarısız olursa, yol geçişi iptal etmek ya da farklı bir rota için değiştirebilirsiniz.

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

Zor kısmı hakkında bir izleme kullanıcı kimlik bakıyorum eğer zaten kimliği (ki, sensin ziyaret sayfadan sonra bir önceki oturum ve kaydedilmiş bir auth token kurabiye, ya da belki zor tazelenmiş bir sayfa ya düştü üzerine bir URL bir bağlantı). Çünkü ui-router çalışır, auth kontrol etmeden önce kimliğinizi gidermek bir kez yapmak gerekir. Bu devlet sizin config resolve seçeneğini kullanarak yapabilirsiniz. Müdür başka bir şey olmadan önce çözülmesi için zorlar ve bütün devletlerden miras bu site için bir ana durum var.

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

Burada... resolve yalnızca bir kez çağrılır başka bir sorun var. Kimlik araması için sözünü tamamladığında, gidermek temsilci tekrar çalışmaz. Bu yüzden yapmamız gereken senin auth kontrollerinde iki yer var: bir zamanlar uyarınca kimliğinizi söz çözülmesine resolve, kapakları ilk kez uygulama yükler, ve sonra $stateChangeStart çözünürlük yapıldı, kapakları her zaman senin etrafında gezinmek Birleşik Devletleri.

TAMAM, şimdiye kadar ne yaptık?

1. Kullanıcı eğer app yükler oturum zaman kontrol edilmelidir.
2. Oturum açmış olan kullanıcı hakkında bilgi izliyoruz.
3. Onlara kullanıcı giriş yapmış olmanız gerekmektedir Devletler için devlet sisteme giriş yapmak yönlendirin.
4. Eğer erişim izni var eğer devlet bir erişim engellendi biz onları yönlendirmek.
5. Eğer onları günlük etmemiz gerekirse, kullanıcıların istenen orijinal durumuna geri yönlendirmek için bir mekanizma var.
6. Bir kullanıcı (auth bilet yöneten herhangi bir istemci veya sunucu kodu ile uyum içinde kablolu olması gerekiyor) imzalayabiliriz.
7. Bizyokkullanıcılar giriş sayfasına bir bağlantı üzerinde tarayıcı veya onların bırak onlar yeniden her zaman göndermem gerekiyor.

Buradan nereye gideceğiz? Evet, giriş yapın gerektiren bölgelere devletler düzenleyebilirsiniz. Bu devletler için roles 20 *(veya devralma kullanmak istiyorsanız bir ebeveyn,) ekleyerek/yetkili kullanıcı kimliği gerektirir. Burada, Yöneticiler için bir kaynak tutarız:

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

Artık kullanıcılar bir erişim yolu ne devlet tarafından-devlet kontrol edebilirsiniz. Başka bir endişen? Bir görünüm ya da giriş olup olmadıklarına göre belki de değişen tek parçası? Sorun değil. Koşullu bir şablon ya da bir öğe görüntüleyebilirsiniz çeşitli yollar ile principal.isAuthenticated() principal.isInRole() bile kullanın.

İlk olarak, ne olursa olsun bir kontrol ya da içine principal enjekte ve kapsamı sok kolayca görünümünde kullanabilirsiniz:

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

Ya da bir öğe göstermek veya gizlemek için:

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

Vb., bu yüzden, vesaire. Neyse, örnek uygulamanızda, kimliği doğrulanmamış kullanıcılar damla izin verecek giriş sayfası için bir devlet olurdu. Giriş Yap veya üye devletler için bağlantılar, ya da bu formları Bu sayfa içine inşa edilmiş olabilir. Sizin içinde uygunsa.

Pano sayfaları Kullanıcıların oturum gerektiren bir devlet içinde miras ve, diyelim ki, User rolü bir üyesi olabilir. Konuştuğumuz tüm yetki şeyler oradan gitmezdi.