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

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

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

Вы можете слушать $locationChangeSuccess и выполнять некоторую логику, даже асинхронную логику. Основываясь на этой логике, вы можете позволить функции возвращать неопределенное значение, что приведет к продолжению перехода состояния в нормальном режиме, или вы можете сделать $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');
        }
      });
    }]
  );

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

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

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

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

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

Или также

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

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

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

Использование $ http Interceptor

Используя $ http перехватчик, вы можете отправлять заголовки в Back-end или наоборот и выполнять свои проверки таким образом.

Отличная статья о $ 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.

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

В этом сервисе вам понадобятся некоторые основные методы:

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

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

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

Хороший и надежный пример такого поведения это проект angular-app и, в частности, его модуль безопасности , основанный на потрясающем модуле HTTP-аутентификации-перехватчике

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

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

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

Наконец, вам понадобится какой-то способ определить, может ли ваш вошедший в систему пользователь выполнить определенные операции. Этого можно достичь, добавив функцию «can» в службу аутентификации. Может принимать два параметра: - действие - требуется - (т. Е. '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 */ }

Я хотел бы поделиться другим решением, работающим с UI-маршрутизатором 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'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;
                    }]);

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

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

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

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