AngularJS + UI Router: Überprüfung von Berechtigungen und Zugriffsrechten

  • Tutorial
Wenn Ihre Anwendung das Autorisieren von Benutzern und / oder das Überprüfen von Zugriffsrechten umfasst, müssen Sie entweder das Rad neu erfinden oder Google nach einer geeigneten Lösung suchen. Grundsätzlich habe ich es auch getan. Am Ende habe ich die unten beschriebene Option akzeptiert, die für mich akzeptabel war.

Hintergrund


Ich habe beschlossen, Informationen über den autorisierten Benutzer in sessionStorage zu speichern und sie zu kopieren, als ich die Anwendung in gestartet habe $rootScope. Auf Empfehlung der Autoren des UI-Routers speichere ich außerdem Objekte $stateund Werte in $ rootScope, $stateParamum den Zugriff zu vereinfachen. Informationen über den Zugriff auf einen bestimmten Zustand können databei der Beschreibung des Zustands selbst über den Block übertragen werden . Da der Zugriff in meiner Anwendung überall gesperrt ist, habe ich mich entschieden, vom Gegenteil abzuweichen und einen Wert noLogin = truefür Status hinzuzufügen, für die keine Autorisierung erforderlich ist, z. B. eine Anmeldeseite, die Wiederherstellung von Passwörtern oder die Registrierung.

angular.module('myApp.auth', [
    'ui.router'
  ])
  .config(['$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('auth', {
          url: '/auth',
          abstract: true,
          template: ''
        })
      .state('auth.login', {
        url: '/login',
        templateUrl: 'src/auth/partials/login.html', 
        data: {
          'noLogin': true
        }
      });
  ]);


Erstellen eines Service für das Pre-Routing


Sie müssen zu Beginn, bevor der Router funktioniert, die Berechtigung und die Zugriffsrechte überprüfen, bevor der Besucher in den angeforderten Status versetzt wird (es wird davon ausgegangen, dass Sie wissen, dass der UI-Router keine Status verwaltet, sondern Status. Weitere Informationen finden Sie in der offiziellen Dokumentation). Eine gute Möglichkeit, dies zu tun, besteht darin, den Listener an ein Ereignis $stateChangeStartin der run () -Methode Ihres Hauptmoduls zu hängen . Um den Hauptteil der Methode nicht mit Funktionen zu überfrachten, die umfangreich und komplex sein können, stelle ich sie in einen separaten Dienst, in der Methode, die run()ich gerade als Dienstmethode bezeichne. Ich denke, es bedarf keiner weiteren Erklärung.

angular.module('myApp.auth')
  .service('SessionService', [
    '$injector',
    function($injector) {
      "use strict";
      this.checkAccess = function(event, toState, toParams, fromState, fromParams) {
        var $scope = $injector.get('$rootScope'),
            $sessionStorage = $injector.get('$sessionStorage');
        if (toState.data !== undefined) {
          if (toState.data.noLogin !== undefined && toState.data.noLogin) {
            // если нужно, выполняйте здесь какие-то действия 
            // перед входом без авторизации
          }
        } else {
          // вход с авторизацией
          if ($sessionStorage.user) {
            $scope.$root.user = $sessionStorage.user;
          } else {
            // если пользователь не авторизован - отправляем на страницу авторизации
            event.preventDefault();
            $scope.$state.go('auth.login');
          }
        }
      };
    }
  ]);


Alles zusammen


Nun, die letzte Berührung bleibt, damit alles funktioniert - hängen Sie den Zuhörer bei einem Service-Event auf $state.

angular.module('myApp', [
  'myApp.auth',
  'ui.router',
  'ngStorage'
])
.run([
  '$rootScope', '$state', '$stateParams', 'SessionService',
  function ($rootScope, $state, $stateParams, SessionService) {
    $rootScope.$state = $state;
    $rootScope.$stateParams = $stateParams;
    $rootScope.user = null;
    // Здесь мы будем проверять авторизацию
    $rootScope.$on('$stateChangeStart',
      function (event, toState, toParams, fromState, fromParams) {
        SessionService.checkAccess(event, toState, toParams, fromState, fromParams);
      }
    );
  }
])


Fazit


Ich denke, dieses Beispiel reicht völlig aus, um es als Idee zu verwenden und Ihre eigene Autorisierung und Überprüfung der Zugriffsrechte für alle Arten von Goodies zu schreiben. Beispielsweise können Sie im selben Block databei der Beschreibung des Status beliebige RBAC-Regeln übertragen und diese dann in Ihrem Service überprüfen.

Nur registrierte Benutzer können an der Umfrage teilnehmen. Bitte komm rein .

Was verwenden Sie für das Routenmanagement in Angular JS?

  • 39,8% ngRoute 296
  • 62,1% UI-Router 462
  • 1,8% Ich kenne eine bessere Lösung (schreibe in die Kommentare) 14
  • 2% Ich selbst habe einen Router (Share) geschrieben 15

Jetzt auch beliebt: