Dotychczas opublikowane rozwiązania są moim zdaniem niepotrzebnie skomplikowane. Jest prostszy sposób. dokumentacja ui-router mówi listen to $locationChangeSuccess and use $urlRouter.sync() to check a state transition, halt it, or wznowienie it. Ale nawet to nie działa.

Są jednak dwie proste alternatywy. Wybierz jeden:

Rozwiązanie 1: listening on $locationChangeSuccess

Można słuchać $locationChangeSuccess i można tam wykonać jakąś logikę, nawet asynchroniczną. Na podstawie tej logiki, możesz pozwolić funkcji zwrócić undefined, co spowoduje, że przejście stanu będzie kontynuowane jak zwykle, lub możesz zrobić $state.go('logInPage'), jeśli użytkownik musi być uwierzytelniony. Oto przykład:

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

Należy pamiętać, że w rzeczywistości nie zapobiega to ładowaniu się stanu docelowego, ale przekierowuje do strony logowania, jeśli użytkownik jest nieautoryzowany. To w porządku, ponieważ prawdziwa ochrona jest na serwerze.

Rozwiązanie 2: użycie stanu resolve

W tym roztworze stosuje się ui-router funkcja resolve .

Zasadniczo odrzucasz obietnicę w resolve, Jeśli Użytkownik nie jest uwierzytelniony, a następnie przekierowujesz go na stronę logowania.

Oto Jak to jest:

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()
      }
    }
  }
)

W przeciwieństwie do pierwszego rozwiązania, rozwiązanie to faktycznie zapobiega ładowaniu się stanu docelowego.

Najprostszym rozwiązaniem jest użycie $stateChangeStart i event.preventDefault(), aby anulować zmianę stanu, gdy użytkownik nie jest uwierzytelniony i przekierować go do stanu auth , który jest stroną logowania.

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

Myślę, że potrzebujesz service, które obsługują proces uwierzytelniania (i jego przechowywanie).

W tym serwisie będziesz potrzebował kilku podstawowych metod :

• isAuthenticated()
• login()
• logout()
• itd ...

Ta usługa powinna być wtryskiwana do kontrolerów każdego modułu:

• w sekcji Pulpitu nawigacyjnego użyj tej usługi, aby sprawdzić, czy użytkownik jest uwierzytelniony (metodaservice.isAuthenticated()). jeśli nie, Przekieruj do / login
• w sekcji logowania, po prostu użyj danych formularza, aby uwierzytelnić użytkownika za pomocą metody service.login()

Dobrym i solidnym przykładem takiego zachowania jest projekt angular-app , a w szczególności jego moduł bezpieczeństwa , który opiera się na niesamowitym Module http Auth Interceptor

Hope this helps

Stworzyłem ten moduł, aby pomóc w tym procesie bułka z masłem

Możesz robić takie rzeczy jak:

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

Lub też

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

Jest nowy, ale warto sprawdzić!

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

Chciałem podzielić się innym rozwiązaniem pracującym z ui router 1.0.0.X

Jak zapewne wiesz, stateChangeStart i stateChangeSuccess są obecnie przestarzałe. https://github.com/angular-ui/ui-router/issues/2655

Zamiast tego powinieneś użyć $transitions http://angular-ui.github.io/ui-router/1.0.0-alpha.1/interfaces/transition.ihookregistry.html

Tak to osiągnąłem:

Najpierw mam i AuthService z kilkoma przydatnymi funkcje

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

W takim razie mam taką konfigurację:

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

Widać, że używam

data: {
   authRequired: true
}

Aby oznaczyć stan dostępny tylko wtedy, gdy jest uwierzytelniony.

Następnie, na .Uruchom używam przejść, aby sprawdzić stan autheticated

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

Zbudowałem ten przykład używając kodu znalezionego w dokumentacji $transitions. Jestem całkiem nowy z routerem ui, ale działa.

Oto jak wydostaliśmy się z nieskończonej pętli routingu i nadal używaliśmy $state.go zamiast $location.path

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

Mam inne rozwiązanie: to rozwiązanie działa idealnie, gdy masz tylko treści, które chcesz pokazać, gdy jesteś zalogowany. Zdefiniuj regułę, w której sprawdzasz, czy jesteś zalogowany, a nie ścieżkę do tras białej listy.

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

W moim przykładzie pytam, czy nie jestem zalogowany, a bieżąca trasa, którą chcę wytyczyć, nie jest częścią ` / login', ponieważ Moje trasy do białej listy są następujące

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

Oto mój cały plik routingu dla modułu logowania

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 */ } is ES6 syntax, use instead function() { /* code */ }

Use $http Interceptor

Za pomocą $ http interceptor możesz wysyłać nagłówki do Back-endu lub na odwrót i wykonywać swoje kontrole w ten sposób.

Świetny artykuł o $http

Przykład:

$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);
            }
        };
    });

Najpierw potrzebujesz usługi, którą możesz wprowadzić do kontrolerów, która ma pewne pojęcie o stanie uwierzytelniania aplikacji. Utrzymywanie szczegółów auth z lokalną pamięcią masową jest przyzwoitym sposobem podejścia do tego.

Następnie musisz sprawdzić stan auth tuż przed zmianą stanu. Ponieważ niektóre strony wymagają uwierzytelnienia, a inne nie, Utwórz trasę nadrzędną sprawdzającą auth i spraw, aby wszystkie inne strony, które tego wymagają, były potomkami tego rodzica.

Wreszcie, będziesz potrzebował sposobu, aby stwierdzić, czy aktualnie zalogowany użytkownik może wykonywać określone operacje. Można to osiągnąć poprzez dodanie funkcji " can " do usługi auth. Może przyjmować dwa parametry: - action-required - (czyli 'manage_dashboard' lub 'create_new_dashboard') - object-opcjonalne-obiekt jest obsługiwany. Na przykład, jeśli masz obiekt Pulpitu nawigacyjnego, możesz sprawdzić, czy pulpit nawigacyjny.ownerId === loggedInUser.id. (oczywiście informacje przekazywane od klienta nigdy nie należy ufać i zawsze należy to zweryfikować na serwerze przed zapisaniem go do bazy danych).

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

** zastrzeżenie: powyższy kod jest pseudo-kodem i nie ma żadnych gwarancji * *