AngularJS: örnek Tek Sayfa Uygulama kimlik doğrulaması kullanmak için Temel

SORU

22 NİSAN 2013, PAZARTESİ

AngularJS: örnek Tek Sayfa Uygulama kimlik doğrulaması kullanmak için Temel

AngularJS yeni ve kendi öğretici ile gittim, ve bunun için bir fikir var.

REST bitiş her doğrulanması gereken projem için bir arka uç hazırladım.

Ne ben yapmak istiyorum
bir.) Benim proje http://myproject.com Tek bir sayfa olsun istiyorum.
b.) Bir kez bir kullanıcı hits URL tarayıcı, dayalı eğer kullanıcı giriş ya da değil, o ile sunulan Ana Sayfa/view veya Giriş Sayfası/görünüm altında aynı url http://myproject.com.
c.) eğer bir kullanıcı oturum değilse, form ve sunucu ayarlar USER_TOKEN oturum doldurur, bitiş noktası için tüm istekler USER_TOKEN bağlı olarak doğrulanmış olacak

Benim Karışıklıklar
bir.) Nasıl istemci tarafı kimlik doğrulama AngularJS kullanarak halledebilir miyim? here here gördüm ama bunları kullanmak için nasıl anlamadı
b.) Nasıl kullanıcı açtıysa dayalı kullanıcı için farklı görüşler aynı url http://myproject.com altında veya yok edebilirim

İlk kez angular.js kullanan ve gerçekten başlangıç için nasıl olarak karıştı alıyorum. Herhangi bir tavsiye ve/veya kaynakları çok takdir edilmektedir.

CEVAP

5 EKİM 2014, Pazar

Temelde bir github repo bu yazı özetliyor yarattım: https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec

ng-login Github repo

Plunker

Mümkün olduğunca iyi anlatmaya çalışacağım, bazılarınız orada ben yardım umut:

(1) app.js:Kimlik oluşturma uygulaması tanımı üzerinde sabitler

var loginApp = angular.module('loginApp', ['ui.router', 'ui.bootstrap'])
/*Constants regarding user login defined here*/
.constant('USER_ROLES', {
    all : '*',
    admin : 'admin',
    editor : 'editor',
    guest : 'guest'
}).constant('AUTH_EVENTS', {
    loginSuccess : 'auth-login-success',
    loginFailed : 'auth-login-failed',
    logoutSuccess : 'auth-logout-success',
    sessionTimeout : 'auth-session-timeout',
    notAuthenticated : 'auth-not-authenticated',
    notAuthorized : 'auth-not-authorized'
})

(2) Hizmet Auth:Aşağıdaki tüm fonksiyonlar auth.js hizmet uygulanır. $Http servisi kimlik işlemleri için sunucu ile iletişim kurmak için kullanılır. Ayrıca yetkilendirme işlevleri içerir, eğer kullanıcı belirli bir eylemi gerçekleştirmek için izin verilir.

angular.module('loginApp')
.factory('Auth', [ '$http', '$rootScope', '$window', 'Session', 'AUTH_EVENTS', 
function($http, $rootScope, $window, Session, AUTH_EVENTS) {

authService.login() = [...]
authService.isAuthenticated() = [...]
authService.isAuthorized() = [...]
authService.logout() = [...]

return authService;
} ]);

(3) Oturumu:Kullanıcı veri tutmak için bir singleton. Uygulama burada size bağlı.

angular.module('loginApp').service('Session', function($rootScope, USER_ROLES) {

    this.create = function(user) {
        this.user = user;
        this.userRole = user.userRole;
    };
    this.destroy = function() {
        this.user = null;
        this.userRole = null;
    };
    return this;
});

(4) Ana kumanda:Eğer bu "uygulama, tüm kontrolörler fonksiyonu bu kumanda, miras ve uygulaması. bu kimlik omurgası" ana düşünün

<body ng-controller="ParentController">
[...]
</body>

(5) denetim ErişimBelirli hatlarda erişim 2 adım inkar uygulanacak

a) uı yönlendirici rolleri her yol erişmek için izin verilen verileri Ekle $aşağıda görüldüğü gibi stateProvider hizmet (aynı ngRoute için çalışabilir).

.config(function ($stateProvider, USER_ROLES) {
  $stateProvider.state('dashboard', {
    url: '/dashboard',
    templateUrl: 'dashboard/index.html',
    data: {
      authorizedRoles: [USER_ROLES.admin, USER_ROLES.editor]
    }
  });
})

b) $rootScope.$('$stateChangeStart') fonksiyonu eğer kullanıcı yetkili değilse durum değişikliği önlemek için ekleyin.

$rootScope.$on('$stateChangeStart', function (event, next) {
    var authorizedRoles = next.data.authorizedRoles;
    if (!Auth.isAuthorized(authorizedRoles)) {
      event.preventDefault();
      if (Auth.isAuthenticated()) {
        // user is not allowed
        $rootScope.$broadcast(AUTH_EVENTS.notAuthorized);
      } else {
        // user is not logged in
        $rootScope.$broadcast(AUTH_EVENTS.notAuthenticated);
      }
    }
});

(6) Auth avcı:Bu uygulanır, ama bu kod kapsamı kontrol edilebilir. $Her http isteği sonra, bu uçağı durum kodu kontrol eder, eğer aşağıda biri döndü ise, o zaman kullanıcı giriş zorlamak için bir olay tekrar yayınlar.

angular.module('loginApp')
.factory('AuthInterceptor', [ '$rootScope', '$q', 'Session', 'AUTH_EVENTS',
function($rootScope, $q, Session, AUTH_EVENTS) {
    return {
        responseError : function(response) {
            $rootScope.$broadcast({
                401 : AUTH_EVENTS.notAuthenticated,
                403 : AUTH_EVENTS.notAuthorized,
                419 : AUTH_EVENTS.sessionTimeout,
                440 : AUTH_EVENTS.sessionTimeout
            }[response.status], response);
            return $q.reject(response);
        }
    };
} ]);

S. S.1. Madde de belirtildiği gibi form verilerini otomatik doldur ile ilgili bir hata kolayca directives.js bulunan yönergesi ekleyerek önlenebilir.

P. S. 2Bu kod, kullanıcı tarafından kolayca tedirgin olmak, farklı yollar görülebilmesi için, ya da görüntülenecek hesapta olmayan bir içeriği görüntüleyebilir. Mantığı sunucu tarafında, bu işlerin düzgün ng-app göstermek için bir yoldur uygulanması GEREKİR.

Bunu Paylaş: