Wie wird die rollenbasierte Autorisierung in AngularJS gehandhabt?

Question

Ich erstelle eine Web-App, die zwei Anforderungen für die Benutzer erfüllt. Hinweis: Ich bin neu in AngularJS als Web-Entwicklungsplattform.

Front-End - 1: Eine Suchfunktion, mit der Benutzer anhand von Stichwortsuche und Filtern nach bestimmten Dokumenten und Studien suchen können. Dies wurde mithilfe von MySQL zum Abrufen von Daten und zur Anzeige mit AngularJS implementiert.

Front-End - 2: Benutzer haben die Möglichkeit, ein Konto in der Web-App zu erstellen. Zweck des Kontos ist:

1. Speichern Sie ihre Suchanfragen.
2. Wenn der Administrator jedem Benutzer eine bestimmte Rolle zuweist, erhalten diese Benutzer Zugriff auf zusätzliche Optionen wie das Ändern der in der Datenbank vorhandenen Dokumente sowie das Hochladen neuer Dokumente und anderer Seiten.

Meine Frage:

Wie rollenbasierte Autorisierung in AngularJS behandeln? Ich bin, um herauszufinden, nicht in der Lage, wie einen Rahmen zu schaffen, die folgende Funktionalitäten beinhaltet: - Benutzer eine Rolle zu ihnen zugeordnet bekommen - Verhindern, dass Benutzer Seiten oder Funktionalitäten zugreifen, die nicht mit den Rollen zugeordnet

Ich habe oben über einige SO-Artikel sowie Tutorials, aber jedes Tutorial endet mit Autor sagen, dass rollenbasierte Autorisierung auf der Serverseite behandelt werden sollte und ich verstehe, warum das wahr ist.

Es wäre großartig, wenn mich jemand auf Tutorials oder Write-ups verweisen könnte, bei denen die rollenbasierte Autorisierung serverseitig für AngularJS implementiert ist.

Danke!

Answer 1

Ich verwende rollenbasierte Autorisierung sowohl auf dem Backend als auch auf dem Frontend. Da ich UI-Router für das Routing verwenden, die beste Ressource fand ich (und meine Bedürfnisse verbessern) ist dieser Artikel:

Link

abgelaufen Wenn Sie UI-Router verwenden, ist es auf jeden Fall überprüfen. Grundsätzlich müssen Sie die Sicherheit Ihrer Routen einrichten und alle Routenänderungen abfangen. Der Artikel enthält auch eine Anweisung zum Ausblenden von Benutzeroberflächenelementen, wenn der Benutzer nicht berechtigt ist, auf den dahinter liegenden Inhalt zuzugreifen.

---

Edit: einige Code hinzufügen.

Zuerst müssen Sie Benutzerrechte irgendwo gespeichert haben, z.auf Benutzerobjekt in localstorage serialisiert:

{"id":1,"name":"user","created_at":"2016-04-17 18:58:19","gender":"m","roles":["admin"]} 

Dann haben Sie zwei wichtige Teile:

• Richtlinie - zu bestimmen, ob Element sichtbar oder nicht, basierend auf zugewiesenen Berechtigungs
• Service sein sollte - zu handhaben Berechtigungsprüfung

Richtlinie:

Sie müssen Ihr CSS so einstellen, dass Elemente mit der Klasse hidden nicht sichtbar sind.

Service:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .factory('authorization', authorization); 

    /** @ngInject */ 
    function authorization($rootScope) { 
    var service = { 
     authorize: authorize, 
     constants: { 
     authorised: 0, 
     loginRequired: 1, 
     notAuthorised: 2 
     } 
    }; 

    return service; 

    function authorize(loginRequired, requiredPermissions, permissionCheckType) { 
     var result = service.constants.authorised, 
      user = $rootScope.currentUser, 
      loweredPermissions = [], 
      hasPermission = true, 
      permission; 

     permissionCheckType = permissionCheckType || 'atLeastOne'; 

     if (loginRequired === true && user === undefined) { 
      result = service.constants.loginRequired; 

     } else if ((loginRequired === true && user !== undefined) && 
        (requiredPermissions === undefined || requiredPermissions.length === 0)) { 
      result = service.constants.authorised; 

     } else if (requiredPermissions) { 

      loweredPermissions = []; 

      angular.forEach(user.roles, function (permission) { 
       loweredPermissions.push(permission.toLowerCase()); 
      }); 

      for (var i = 0; i < requiredPermissions.length; i += 1) { 
       permission = requiredPermissions[i].toLowerCase(); 

       if (permissionCheckType === 'combinationRequired') { 
        hasPermission = hasPermission && loweredPermissions.indexOf(permission) > -1; 
        // if all the permissions are required and hasPermission is false there is no point carrying on 
        if (hasPermission === false) { 
         break; 
        } 
       } else if (permissionCheckType === 'atLeastOne') { 
        hasPermission = loweredPermissions.indexOf(permission) > -1; 
        // if we only need one of the permissions and we have it there is no point carrying on 
        if (hasPermission) { 
         break; 
        } 
       } 
      } 

      result = hasPermission ? 
        service.constants.authorised : 
        service.constants.notAuthorised; 
     } 

     return result; 
    } 
    } 
})(); 

Jetzt können Sie die Richtlinie verwenden/auszublenden Element zeigen:

<a ui-sref="app.administration" class="btn btn-primary pull-right" access="admin">Administration</a> 

dieses Kurses wird das Element in DOM nur verstecken, so dass Sie tun müssen, die Berechtigungsprüfung auch auf dem Server.

Dieser erste Teil wurde gelöst, um Elemente in der Benutzeroberfläche anzuzeigen/zu verbergen, Sie können aber auch App-Routen schützen.

Routendefinition:

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .config(routeConfig); 

    /** @ngInject */ 
    function routeConfig($stateProvider) { 
    $stateProvider 
     .state('app.dashboard', { 
     url: '/dashboard', 
     data: { 
      access: { 
      loginRequired: true 
      } 
     }, 
     templateUrl: 'template_path', 
     controller: 'DashboardController as vm' 
     } 
    } 
})(); 

und jetzt prüfen nur für die Erlaubnis, in $stateChangeStart Ereignis

(function() { 
    'use strict'; 

    angular 
    .module('app') 
    .run(runBlock); 

    /** @ngInject */ 
    function runBlock($rootScope, $state, authorization) { 
    $rootScope.$on('$stateChangeStart', function(event, toState) { 
     // route authorization check 
     if (toState.data !== undefined && toState.data.access !== undefined) { 
     authorised = authorization.authorize(toState.data.access.loginRequired, 
              toState.data.access.requiredPermissions, 
              toState.data.access.permissionCheckType); 

     if (authorised === authorization.constants.loginRequired) { 
      event.preventDefault(); 
      $state.go('app.login'); 
     } else if (authorised === authorization.constants.notAuthorised) { 
      event.preventDefault(); 
      $state.go('app.dashboard'); 
     } 
     } 
    }); 
    } 

})();