Angularjs ui-router. Как перенаправить на страницу входа в систему

У меня 4 состояния: панель инструментов , dahboard.main , dashboard.minor , login . приборная панель является абстрактной и является родительским состоянием для .minor и .main состояний. Ниже мой код:

.state('dashboard', { url: "/dashboard", abstract: true, templateUrl: "views/dashboard.html", resolve: { auth: function ($q, authenticationSvc) { var userInfo = authenticationSvc.getUserInfo(); if (userInfo) { return $q.when(userInfo); } else { return $q.reject({ authenticated: false }); } } }, controller: "DashboardCtrl", data: { pageTitle: 'Example view' } }) .state('dashboard.main', { url: "", templateUrl: "views/main.html", controller: "DashboardCtrl", data: { pageTitle: 'Main view' } }) 

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

 .factory("authenticationSvc", ["$http", "$q", "$window", function ($http, $q, $window) { var userInfo; function login(email, password) { var deferred = $q.defer(); $http.post("/api/login", { email: email, password: password }) .then(function (result) { if(result.data.error == 0) { userInfo = { accessToken: result.data.accessToken }; $window.sessionStorage["userInfo"] = JSON.stringify(userInfo); deferred.resolve(userInfo); } else { deferred.reject(error); } }, function (error) { deferred.reject(error); }); return deferred.promise; } function getUserInfo() { return userInfo; } return { login: login, logout: logout, getUserInfo: getUserInfo }; }]); 

Я проверяю значение auth в config :

 .run(function($rootScope, $location, $state) { $rootScope.$state = $state; $rootScope.$on("routeChangeSuccess", function(userInfo) { consol.log(userInfo); }); $rootScope.$on("routeChangeError", function(event, current, previous, eventObj) { if(eventObj.authenticated === false) { $state.go('login'); } }); }); 

Но, к сожалению, когда я перехожу на свой сайт root или dashboard, я получаю пустую страницу. Что не так с этим кодом? Благодаря!

Дело в том, что не перенаправляйте, если не нужно === если уже перенаправлено в предполагаемое состояние. Существует рабочий плункер с аналогичным решением

 .run(function($rootScope, $location, $state, authenticationSvc) { $rootScope.$on( '$stateChangeStart', function(e, toState , toParams , fromState, fromParams) { var isLogin = toState.name === "login"; if(isLogin){ return; // no need to redirect } // now, redirect only not authenticated var userInfo = authenticationSvc.getUserInfo(); if(userInfo.authenticated === false) { e.preventDefault(); // stop current execution $state.go('login'); // go to login } }); }); 

Проверьте их для аналогичного объяснения:

  • Угловой ui-маршрутизатор – redirect не работает вообще
  • Как я могу исправить «Максимальный размер стека вызовов» AngularJS

Поскольку вы используете модуль UI-Router, вы должны использовать $stateChangeStart , $stateChangeSuccess .

Проверьте эту ссылку для получения дополнительной информации: https://github.com/angular-ui/ui-router/issues/17

Также в консоли consol.log(userInfo) есть опечатка.

Проверьте консоль в хром-dev-инструментах. Это даст идею, если что-то еще отсутствует.

Остерегайтесь того, что на самом деле событие $stateChangeSuccess устарело и больше не доступно в пакете с angular-ui-route . Теперь это поведение обрабатывается transition hooks . Вы можете достичь своей цели, используя $transitions.onStart следующим образом:

 run.$inject = ['$transitions', 'authenticationSvc']; function run($transitions, authenticationSvc) { $transitions.onStart({}, function (trans) { var userInfo = authenticationSvc.getUserInfo(); var $state = trans.router.stateService; if(userInfo.authenticated === false) { $state.go('login'); // go to login } }); } 
Interesting Posts

Как оживить добавление или удаление строк ListView Android

Установка Windows 8 для отключения USB-следа по умолчанию для всех устройств – powercfg-труб?

Как я могу поймать ctrl-c-событие? (C ++)

Получить все веб-элементы управления определенного типа на странице

Могу ли я разместить Windows Form внутри элемента управления

Установка размера печати jLabel и установка jRadiobutton на печать

Как найти среднее из сгруппированных столбцов в Spark SQL?

Третий конфликт прототипа / jQuery Chrome

Как запускать задачи параллельно в MSBuild

Хорошая программа для визуализации использования файловой системы на Mac?

Валовый неожиданный импорт токена при выполнении мокко-тестов

Сделайте ASP.NET конвертер WCF в JSON, опустив tags «Key» и «Value»

Мониторинг и контроль интернет-трафика в небольшом офисе

Кнопка печати ReportViewer несовместима с IE 10?

Когда прекратить использование жесткого диска? Какие правила / программное обеспечение применяются?

Давайте будем гением компьютера.