Решения, опубликованные до сих пор, на мой взгляд, излишне сложны. Там более простой способ. Документация ui-router говорит, что она прослушивает $locationChangeSuccess и использует $urlRouter.sync(), чтобы проверить переход состояния, остановить его или возобновить. Но даже это на самом деле не работает.

Однако, вот две простые альтернативы. Выберите один:

Решение 1: прослушивание $locationChangeSuccess

Вы можете слушать $locationChangeSuccess, и вы можете выполнить некоторую логику, даже асинхронную логику. Исходя из этой логики, вы можете позволить функции возвращать undefined, что приведет к продолжению перехода состояния как обычно, или вы можете сделать $state.go('logInPage'), если пользователь должен пройти аутентификацию. Вот пример:

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

Имейте в виду, что это фактически не предотвращает загрузку целевого состояния, но оно перенаправляется на страницу входа в систему, если пользователь несанкционирован. Это нормально, так как настоящая защита на сервере, во всяком случае.

Решение 2: использование состояния resolve

В этом решении вы используете ui-router функцию разрешения.

В основном вы отклоняете обещание в resolve, если пользователь не аутентифицирован, а затем перенаправляет его на страницу входа.

Вот как это делается:

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

В отличие от первого решения, это решение фактически предотвращает загрузку целевого состояния.

Самое простое решение - использовать $stateChangeStart и event.preventDefault() для отмены изменения состояния, когда пользователь не аутентифицирован и перенаправляет его в состояние auth, которое является страницей входа.

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

Мне кажется, вам нужен service, который обрабатывает процесс аутентификации (и его хранилище).

В этой службе вам понадобятся основные методы:

• isAuthenticated()
• login()
• logout()
• и т.д.

Эта служба должна быть введена в ваши контроллеры каждого модуля:

• В разделе вашей панели мониторинга используйте эту службу для проверки подлинности пользователя (метод service.isAuthenticated()). если нет, перенаправление на /login
• В разделе входа в систему просто используйте данные формы для аутентификации пользователя с помощью метода service.login()

Хорошим и надежным примером такого поведения является проект angular-app и, в частности, его модуль защиты, который основан на awesome HTTP Auth Interceptor Module

Надеюсь, что это поможет

I Создал этот модуль, чтобы помочь сделать этот процесс куском пирога

Вы можете делать такие вещи, как:

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

Или также

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

Это новый, но стоит проверить!

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

Я хотел поделиться другим решением, работающим с ui router 1.0.0.X

Как вы знаете, stateChangeStart и stateChangeSuccess теперь устарели. https://github.com/angular-ui/ui-router/issues/2655

Вместо этого вы должны использовать $transitions http://angular-ui.github.io/ui-router/1.0.0-alpha.1/interfaces/transition.ihookregistry.html

Вот как я это достиг:

Сначала у меня есть и AuthService с некоторыми полезными функциями

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

Тогда у меня есть эта конфигурация:

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

Вы можете видеть, что я использую

data: {
   authRequired: true
}

чтобы отметить доступное состояние, если оно аутентифицировано.

то, на .run, я использую переходы для проверки состояния, прошедшего проверку.

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

Я построю этот пример, используя некоторый код, найденный в документации по переходу $. Я новичок в маршрутизаторе ui, но он работает.

Надеюсь, это может помочь кому угодно.

Вот как мы вышли из бесконечного цикла маршрутизации и все еще использовали $state.go вместо $location.path

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

Использовать перехватчик $http

С помощью перехватчика $http вы можете отправлять заголовки в конец или наоборот и выполнять свои проверки таким образом.

Отличная статья о $http перехватчики

Пример:

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

Поместите это в свою .config или .run функцию.

Сначала вам понадобится служба, которую вы можете ввести в свои контроллеры, которые имеют некоторое представление о состоянии аутентификации приложения. Сохранение данных аутентификации с помощью локального хранилища - достойный способ приблизиться к нему.

Затем вам нужно будет проверить состояние auth перед изменениями состояния. Поскольку у вашего приложения есть несколько страниц, которые должны быть аутентифицированы, а другие - нет, создайте родительский маршрут, который проверяет auth, и сделает все остальные страницы, которые требуют того же самого, быть дочерним элементом этого родителя.

Наконец, вам нужно каким-то образом определить, может ли ваш пользователь в настоящий момент выполнять определенные операции. Этого можно достичь, добавив функцию "can" к вашей службе auth. Может принимать два параметра:  - действие - требуется - (т.е. "manage_dashboards" или "create_new_dashboard" )  - объект - необязательный - объект работает. Например, если у вас есть объект панели мониторинга, вы можете проверить, есть ли dashboard.ownerId === loggedInUser.id. (Конечно, информация, переданная от клиента, никогда не должна быть доверенной, и вы всегда должны ее проверять на сервере, прежде чем записывать ее в свою базу данных).

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

** ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: вышеуказанный код является псевдокодом и не содержит гарантий **

У меня есть другое решение: это решение прекрасно работает, когда у вас есть только контент, который вы хотите показать при входе в систему. Определите правило, в котором вы проверяете, если вы вошли в систему, а не путь к белым списку.

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

В моем примере я спрашиваю, не вошел ли я в систему, и текущий маршрут, который я хочу использовать, не является частью `/login ', потому что мои маршруты белого списка следующие

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

поэтому у меня есть мгновенный доступ к этим двум маршрутам, и каждый другой маршрут будет проверяться, если вы в сети.

Вот мой весь файл маршрутизации для модуля входа в систему

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 */ } является синтаксисом ES6, используйте вместо этого function() { /* code */ }