web-dev-qa-db-de.com

AngularJS UI-Router Login-Authentifizierung

Ich bin neu in AngularJS und bin ein wenig verwirrt darüber, wie ich Angular- "UI-Router" in dem folgenden Szenario verwenden kann:

Ich erstelle eine Webanwendung, die aus zwei Abschnitten besteht. Der erste Abschnitt ist die Homepage mit ihren Anmelde- und Anmeldeansichten und der zweite Abschnitt ist das Dashboard (nach erfolgreicher Anmeldung).

Ich habe einen index.html für den Home-Bereich mit seiner angular App und ui-router Konfiguration erstellt, um /login und /signup Ansichten zu verarbeiten, und es gibt eine andere Datei dashboard.html für den Dashboard-Bereich mit seiner App und ui-router config für die Verarbeitung vieler Unteransichten.

Jetzt habe ich den Dashboard-Abschnitt abgeschlossen und weiß nicht, wie ich die beiden Abschnitte mit ihren unterschiedlichen angular Apps kombinieren soll. Wie kann ich die Home-App anweisen, zur Dashboard-App umzuleiten?

372
Ahmed Hashem

Ich bin dabei, eine schönere Demo zu erstellen und einige dieser Dienste in einem verwendbaren Modul zu bereinigen, aber hier ist, was ich mir ausgedacht habe. Dies ist ein komplexer Prozess, um einige Vorbehalte zu umgehen. Sie müssen dies in mehrere Teile zerlegen.

Schauen Sie sich diesen Plunk an .

Zunächst benötigen Sie einen Dienst, um die Identität des Benutzers zu speichern. Ich nenne das principal. Es kann überprüft werden, ob der Benutzer angemeldet ist, und auf Anforderung kann ein Objekt aufgelöst werden, das die wesentlichen Informationen zur Identität des Benutzers darstellt. Dies kann alles sein, was Sie benötigen, aber das Wesentliche sind ein Anzeigename, ein Benutzername, möglicherweise eine E-Mail-Adresse und die Rollen, zu denen ein Benutzer gehört (sofern dies für Ihre App gilt). Der Principal hat auch Methoden, um Rollenprüfungen durchzuführen.

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

Zweitens benötigen Sie einen Dienst, der den Status überprüft, in den der Benutzer wechseln möchte, der sicherstellt, dass er angemeldet ist (falls erforderlich; nicht erforderlich für die Anmeldung, das Zurücksetzen des Kennworts usw.), und anschließend eine Rollenüberprüfung durchführt (falls Ihre App verwendet wird) braucht das). Wenn sie nicht authentifiziert sind, senden Sie sie an die Anmeldeseite. Wenn sie authentifiziert sind, aber keine Rollenüberprüfung bestehen, senden Sie sie an eine Seite, der der Zugriff verweigert wurde. Ich nenne diesen 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');
              }
            }
          });
      }
    };
  }
])
_

Jetzt müssen Sie nur noch _ui-router_s $stateChangeStart anhören. Dies gibt Ihnen die Möglichkeit, den aktuellen Status und den gewünschten Status zu überprüfen und Ihre Berechtigungsprüfung einzufügen. Wenn dies fehlschlägt, können Sie den Routenübergang abbrechen oder zu einer anderen Route wechseln.

_.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 beim Verfolgen der Identität eines Benutzers besteht darin, nachzuschlagen, ob Sie sich bereits authentifiziert haben (z. B., wenn Sie die Seite nach einer früheren Sitzung besucht und ein Authentifizierungstoken in einem Cookie gespeichert haben oder eine Seite stark aktualisiert haben oder von einem Link auf eine URL gezogen). Aufgrund der Funktionsweise von _ui-router_ müssen Sie die Identitätsauflösung einmal durchführen, bevor Sie die Authentifizierungsüberprüfung durchführen. Sie können dies mit der Option resolve in Ihrer Statuskonfiguration tun. Ich habe einen übergeordneten Status für die Site, von der alle Status erben, sodass der Principal aufgelöst werden muss, bevor etwas anderes passiert.

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

Hier gibt es ein weiteres Problem ... resolve wird nur einmal aufgerufen. Sobald Ihre Zusage zur Identitätssuche abgeschlossen ist, wird der Auflösungsdelegat nicht mehr ausgeführt. Daher müssen wir Ihre Authentifizierungsprüfungen an zwei Stellen durchführen: einmal gemäß Ihrer Identitätszusage, die in resolve aufgelöst wird, und einmal in _$stateChangeStart_, wenn die Auflösung erfolgt ist. Dies deckt jedes Mal ab, wenn Sie durch Staaten navigieren.

OK, was haben wir bisher gemacht?

  1. Wir überprüfen, wann die App geladen wird, wenn der Benutzer angemeldet ist.
  2. Wir verfolgen Informationen über den angemeldeten Benutzer.
  3. Wir leiten sie an den Anmeldestatus weiter, wenn der Benutzer angemeldet sein muss.
  4. Wir leiten sie in einen Status "Zugriff verweigert" um, wenn sie keine Zugriffsberechtigung haben.
  5. Wir haben einen Mechanismus, mit dem Benutzer in den ursprünglichen Status zurückgeleitet werden können, den sie angefordert haben, wenn sie sich anmelden mussten.
  6. Wir können einen Benutzer abmelden (muss zusammen mit einem Client- oder Servercode verkabelt werden, der Ihr Authentifizierungsticket verwaltet).
  7. Wir nicht ​​müssen Benutzer jedes Mal zur Anmeldeseite zurückschicken, wenn sie ihren Browser neu laden oder auf einen Link klicken.

Was machen wir jetzt? Nun, Sie können Ihre Bundesstaaten in Regionen einteilen, für die eine Anmeldung erforderlich ist. Sie können authentifizierte/autorisierte Benutzer anfordern, indem Sie data mit roles zu diesen Bundesstaaten hinzufügen (oder zu einem übergeordneten Bundesstaat, wenn Sie die Vererbung verwenden möchten) ). Hier beschränken wir eine Ressource auf Admins:

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

Jetzt können Sie von Staat zu Staat steuern, welche Benutzer auf eine Route zugreifen können. Irgendwelche anderen Bedenken? Vielleicht können Sie nur einen Teil einer Ansicht variieren, je nachdem, ob sie angemeldet sind oder nicht? Kein Problem. Verwenden Sie principal.isAuthenticated() oder sogar principal.isInRole() mit einer der zahlreichen Möglichkeiten, um eine Vorlage oder ein Element bedingt anzuzeigen.

Zuerst injiziere principal in einen Controller oder was auch immer, und halte es an den Bereich, damit du es in deiner Ansicht leicht benutzen kannst:

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

Einblenden 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>
_

Usw. usw. Auf jeden Fall hätten Sie in Ihrer Beispiel-App einen Status für die Homepage, bei dem nicht authentifizierte Benutzer vorbeischauen könnten. Sie können Links zu den Anmelde- oder Anmeldestatus haben oder diese Formulare in diese Seite integrieren. Was immer dir passt.

Die Dashboard-Seiten können alle von einem Status erben, bei dem die Benutzer angemeldet sein müssen und beispielsweise Mitglied der Rolle User sind. Das gesamte Autorisierungsmaterial, das wir besprochen haben, würde von dort abfließen.

603
HackedByChinese

Die bisher veröffentlichten Lösungen sind meiner Meinung nach unnötig kompliziert. Es gibt einen einfacheren Weg. In der Dokumentation von ui-router wird $locationChangeSuccess angehört und $urlRouter.sync() verwendet, um einen Statusübergang zu überprüfen, anzuhalten oder fortzusetzen. Aber auch das funktioniert eigentlich nicht.

Hier sind jedoch zwei einfache Alternativen. Wähle eins:

Lösung 1: $locationChangeSuccess anhören

Sie können $locationChangeSuccess anhören und dort eine Logik ausführen, sogar eine asynchrone Logik. Basierend auf dieser Logik können Sie die Funktion undefiniert zurückgeben lassen, wodurch der Statusübergang normal fortgesetzt wird, oder Sie können $state.go('logInPage') ausführen, wenn der Benutzer authentifiziert werden muss. Hier ist ein Beispiel:

angular.module('App', ['ui.router'])

// In the run phase of your Angular application  
.run(function($rootScope, user, $state) {

  // Listen to '$locationChangeSuccess', not '$stateChangeStart'
  $rootScope.$on('$locationChangeSuccess', function() {
    user
      .logIn()
      .catch(function() {
        // log-in promise failed. Redirect to log-in page.
        $state.go('logInPage')
      })
  })
})

Bedenken Sie, dass dies das Laden des Zielstatus nicht verhindert, sondern zur Anmeldeseite umleitet, wenn der Benutzer nicht autorisiert ist. Das ist okay, da echter Schutz sowieso auf dem Server ist.

Lösung 2: Verwenden von state resolve

In dieser Lösung verwenden Sie die Funktion ui-router resolve .

Sie lehnen das Versprechen in resolve grundsätzlich ab, wenn der Benutzer nicht authentifiziert ist, und leiten Sie ihn dann auf die Anmeldeseite weiter.

Das geht so:

angular.module('App', ['ui.router'])

.config(
  function($stateProvider) {
    $stateProvider
      .state('logInPage', {
        url: '/logInPage',
        templateUrl: 'sections/logInPage.html',
        controller: 'logInPageCtrl',
      })
      .state('myProtectedContent', {
        url: '/myProtectedContent',
        templateUrl: 'sections/myProtectedContent.html',
        controller: 'myProtectedContentCtrl',
        resolve: { authenticate: authenticate }
      })
      .state('alsoProtectedContent', {
        url: '/alsoProtectedContent',
        templateUrl: 'sections/alsoProtectedContent.html',
        controller: 'alsoProtectedContentCtrl',
        resolve: { authenticate: authenticate }
      })

    function authenticate($q, user, $state, $timeout) {
      if (user.isAuthenticated()) {
        // Resolve the promise successfully
        return $q.when()
      } else {
        // The next bit of code is asynchronously tricky.

        $timeout(function() {
          // This code runs after the authentication promise has been rejected.
          // Go to the log-in page
          $state.go('logInPage')
        })

        // Reject the authentication promise to prevent the state from loading
        return $q.reject()
      }
    }
  }
)

Im Gegensatz zur ersten Lösung verhindert diese Lösung das Laden des Zielzustands.

118
M.K. Safi

Die einfachste Lösung besteht darin, $stateChangeStart und event.preventDefault() zu verwenden, um die Statusänderung abzubrechen, wenn der Benutzer nicht authentifiziert ist, und ihn zum auth -Status umzuleiten, der die Anmeldeseite ist.

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');
        }
      });
    }]
  );
42
sebest

Ich denke, Sie brauchen ein service, das den Authentifizierungsprozess (und dessen Speicherung) abwickelt.

Für diesen Service benötigen Sie einige grundlegende Methoden:

  • isAuthenticated()
  • login()
  • logout()
  • usw ...

Dieser Dienst sollte in Ihre Steuerungen jedes Moduls eingespeist werden:

  • Verwenden Sie diesen Dienst in Ihrem Dashboard-Bereich, um zu überprüfen, ob der Benutzer authentifiziert ist (Methode service.isAuthenticated()). Wenn nicht, leiten Sie zu/login um
  • Verwenden Sie in Ihrem Anmeldebereich einfach die Formulardaten, um den Benutzer mit Ihrer Methode service.login() zu authentifizieren

Ein gutes und robustes Beispiel für dieses Verhalten ist das Projekt angle-app und insbesondere das Sicherheitsmodul , das auf dem fantastischen HTTP Auth Interceptor Module basiert

Hoffe das hilft

22
Cétia

Ich habe dieses Modul erstellt, um diesen Prozess zu einem Kinderspiel zu machen

Sie können Dinge tun wie:

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

Oder auch

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

Es ist brandneu, aber einen Besuch wert!

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

21
Rafael Vidaurre

Ich wollte eine andere Lösung mit dem UI-Router 1.0.0.X teilen

Wie Sie vielleicht wissen, sind stateChangeStart und stateChangeSuccess jetzt veraltet. https://github.com/angular-ui/ui-router/issues/2655

Verwenden Sie stattdessen $ transitions http://angular-ui.github.io/ui-router/1.0.0-alpha.1/interfaces/transition.ihookregistry.html

So habe ich es erreicht:

Zuerst habe ich und AuthService mit einigen nützlichen Funktionen

angular.module('myApp')

        .factory('AuthService',
                ['$http', '$cookies', '$rootScope',
                    function ($http, $cookies, $rootScope) {
                        var service = {};

                        // Authenticates throug a rest service
                        service.authenticate = function (username, password, callback) {

                            $http.post('api/login', {username: username, password: password})
                                    .success(function (response) {
                                        callback(response);
                                    });
                        };

                        // Creates a cookie and set the Authorization header
                        service.setCredentials = function (response) {
                            $rootScope.globals = response.token;

                            $http.defaults.headers.common['Authorization'] = 'Bearer ' + response.token;
                            $cookies.put('globals', $rootScope.globals);
                        };

                        // Checks if it's authenticated
                        service.isAuthenticated = function() {
                            return !($cookies.get('globals') === undefined);
                        };

                        // Clear credentials when logout
                        service.clearCredentials = function () {
                            $rootScope.globals = undefined;
                            $cookies.remove('globals');
                            $http.defaults.headers.common.Authorization = 'Bearer ';
                        };

                        return service;
                    }]);

Dann habe ich diese Konfiguration:

angular.module('myApp', [
    'ui.router',
    'ngCookies'
])
        .config(['$stateProvider', '$urlRouterProvider',
            function ($stateProvider, $urlRouterProvider) {
                $urlRouterProvider.otherwise('/resumen');
                $stateProvider
                        .state("dashboard", {
                            url: "/dashboard",
                            templateUrl: "partials/dashboard.html",
                            controller: "dashCtrl",
                            data: {
                                authRequired: true
                            }
                        })
                        .state("login", {
                            url: "/login",
                            templateUrl: "partials/login.html",
                            controller: "loginController"
                        })
            }])

        .run(['$rootScope', '$transitions', '$state', '$cookies', '$http', 'AuthService',
            function ($rootScope, $transitions, $state, $cookies, $http, AuthService) {

                // keep user logged in after page refresh
                $rootScope.globals = $cookies.get('globals') || {};
                $http.defaults.headers.common['Authorization'] = 'Bearer ' + $rootScope.globals;

                $transitions.onStart({
                    to: function (state) {
                        return state.data != null && state.data.authRequired === true;
                    }
                }, function () {
                    if (!AuthService.isAuthenticated()) {
                        return $state.target("login");
                    }
                });
            }]);

Sie können sehen, dass ich benutze

data: {
   authRequired: true
}

um den Zustand nur dann zugänglich zu machen, wenn er authentifiziert ist.

dann verwende ich beim . run die Übergänge, um den Zustand der Authentifizierung zu überprüfen

$transitions.onStart({
    to: function (state) {
        return state.data != null && state.data.authRequired === true;
    }
}, function () {
    if (!AuthService.isAuthenticated()) {
        return $state.target("login");
    }
});

Ich habe dieses Beispiel mit einem Code erstellt, der in der $ transitions-Dokumentation enthalten ist. Ich bin ziemlich neu mit dem UI-Router, aber es funktioniert.

Hoffe es kann jedem helfen.

14

Hier ist, wie wir aus der unendlichen Routing-Schleife herausgekommen sind und immer noch $state.go anstelle von $location.path verwendet haben.

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

Ich habe eine andere Lösung: Diese Lösung funktioniert perfekt, wenn Sie nur Inhalte haben, die Sie anzeigen möchten, wenn Sie angemeldet sind. Definieren Sie eine Regel, in der Sie überprüfen, ob Sie angemeldet sind, und nicht den Pfad der Whitelist-Routen.

$urlRouterProvider.rule(function ($injector, $location) {
   var UserService = $injector.get('UserService');
   var path = $location.path(), normalized = path.toLowerCase();

   if (!UserService.isLoggedIn() && path.indexOf('login') === -1) {
     $location.path('/login/signin');
   }
});

In meinem Beispiel frage ich, ob ich nicht angemeldet bin und die aktuelle Route, die ich routen möchte, nicht Teil von/login ist, da meine Whitelist-Routen die folgenden sind

/login/signup // registering new user
/login/signin // login to app

so habe ich sofortigen Zugriff auf diese beiden Routen und jede andere Route wird überprüft, ob Sie online sind.

Hier ist meine gesamte Routing-Datei für das Login-Modul

export default (
  $stateProvider,
  $locationProvider,
  $urlRouterProvider
) => {

  $stateProvider.state('login', {
    parent: 'app',
    url: '/login',
    abstract: true,
    template: '<ui-view></ui-view>'
  })

  $stateProvider.state('signin', {
    parent: 'login',
    url: '/signin',
    template: '<login-signin-directive></login-signin-directive>'
  });

  $stateProvider.state('lock', {
    parent: 'login',
    url: '/lock',
    template: '<login-lock-directive></login-lock-directive>'
  });

  $stateProvider.state('signup', {
    parent: 'login',
    url: '/signup',
    template: '<login-signup-directive></login-signup-directive>'
  });

  $urlRouterProvider.rule(function ($injector, $location) {
    var UserService = $injector.get('UserService');
    var path = $location.path();

    if (!UserService.isLoggedIn() && path.indexOf('login') === -1) {
         $location.path('/login/signin');
    }
  });

  $urlRouterProvider.otherwise('/error/not-found');
}

() => { /* code */ } ist ES6-Syntax, verwenden Sie stattdessen function() { /* code */ }

2
Chris Incoqnito

Zunächst benötigen Sie einen Dienst, den Sie in Ihre Controller einbinden können, der eine Vorstellung vom Status der App-Authentifizierung hat. Das Beibehalten von Authentifizierungsdetails mit lokalem Speicher ist eine gute Möglichkeit, dies zu erreichen.

Als nächstes müssen Sie den Status der Authentifizierung überprüfen, bevor sich der Status ändert. Da Ihre App über einige Seiten verfügt, die authentifiziert werden müssen, und über andere, die nicht authentifiziert werden müssen, erstellen Sie eine übergeordnete Route, die die Authentifizierung überprüft, und machen Sie alle anderen Seiten, für die dasselbe erforderlich ist, zu einem untergeordneten Element dieses übergeordneten Elements.

Schließlich müssen Sie feststellen, ob Ihr derzeit angemeldeter Benutzer bestimmte Vorgänge ausführen kann. Dies kann erreicht werden, indem Sie Ihrem Authentifizierungsdienst eine 'Kann'-Funktion hinzufügen. Kann zwei Parameter annehmen: - action - required - (dh 'manage_dashboards' oder 'create_new_dashboard') - object - optional - Objekt, an dem gearbeitet wird. Wenn Sie beispielsweise ein Dashboard-Objekt hatten, möchten Sie möglicherweise überprüfen, ob dashboard.ownerId === logicalInUser.id. (Natürlich sollten vom Client übermittelte Informationen niemals als vertrauenswürdig eingestuft werden, und Sie sollten dies immer auf dem Server überprüfen, bevor Sie sie in Ihre Datenbank schreiben.).

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

** HAFTUNGSAUSSCHLUSS: Der obige Code ist Pseudo-Code und kommt ohne Garantie **

2
colefner

Verwenden Sie $ http Interceptor

Mit einem $ http-Interceptor können Sie Header an das Back-End oder umgekehrt senden und Ihre Prüfungen auf diese Weise durchführen.

Großartiger Artikel über $ http interceptors

Beispiel:

$httpProvider.interceptors.Push(function ($q) {
        return {
            'response': function (response) {

                // TODO Create check for user authentication. With every request send "headers" or do some other check
                return response;
            },
            'responseError': function (reject) {

                // Forbidden
                if(reject.status == 403) {
                    console.log('This page is forbidden.');
                    window.location = '/';
                // Unauthorized
                } else if(reject.status == 401) {
                    console.log("You're not authorized to view this page.");
                    window.location = '/';
                }

                return $q.reject(reject);
            }
        };
    });

Fügen Sie dies in Ihre .config- oder .run-Funktion ein.

2
TSlegaitis