Angularjs ui-router generates an endless loop

Question

I know that this issue was discussed several times, but the solutions did not fit into my requirements. The quest is simple. If the user is not logged in, the user should be redirected to the login page. When I do this in $ on, it generates an infinite loop. Let me know what is the best solution.

var adminpanel = angular.module('administrator', ['ngMessages','ui.router','ui.bootstrap','ngCookies']); adminpanel.config(function ($stateProvider, $urlRouterProvider) { // $urlRouterProvider.otherwise("/login"); $urlRouterProvider.otherwise( function($injector, $location) { var $state = $injector.get("$state"); $state.go("login"); }); $stateProvider .state('login', { url: "/login", controller:"userCtrl", templateUrl: "views/login.tpl.html", permissions:{except:['admin']} } ) .state('menu', { templateUrl: "views/menu.tpl.html", controller:'adminCtrl', permissions:{allow : ['admin']} } ) .state('menu.dashboard', { url: "/dashboard", templateUrl: "views/dashboard.tpl.html", permissions:{allow : ['admin']} } ) }); adminpanel.run([ '$rootScope', '$state', '$stateParams','$cookieStore',function ($rootScope, $state, $stateParams,$cookieStore) { $rootScope.$state = $state; $rootScope.$stateParams = $stateParams; $rootScope.$on('$stateChangeStart',function(event, toState, fromState){ if($rootScope.session == undefined && $cookieStore.get('name') == undefined){$rootScope.session={}} else if($rootScope.session == undefined && $cookieStore.get('name') != undefined){ $rootScope.session={set:true, name : $cookieStore.get('name'), userid :$cookieStore.get('userid'), role:$cookieStore.get('role')}; }; //Added below lines as update if(toState.name === "login"){ return; } //Added above lines as update var authorized = true; if(Object.keys($rootScope.session).length === 0){ event.preventDefault(); $state.go('login'); } else if(Object.keys(toState.permissions).length !=0){ console.log($rootScope.session.role); angular.forEach(toState.permissions, function(value,key){ angular.forEach(value,function(role){ if(key === 'except' && role === $rootScope.session.role) {authorized = false;} else if(key === 'allow' && role !== $rootScope.session.role) {authorized = false;}; }); }); } if(!authorized){ event.preventDefault(); $state.go('menu.dashboard'); }; }); }]); 

Thanks in advance for your help.

Update 1:

The solution works just fine. But if the user is logged in, the user should not have access to the login page if he is trying to get through the address bar. Therefore, I created a permission parameter with a key exception.

But if the user enters the login page through the address bar, a login page is created, which should not be redirected to the menu.dashboard.

I hope that I understand.

Answer 1

Redirection should be avoided here if it has already happened , if it has already been redirected:

 ... // never redirect to state, if already going there if(toState.name === "login"){ return; } // evaluate some IF here only if we go to other state then login if(Object.keys($rootScope.session).length === 0) { event.preventDefault(); $state.go('login'); return; } 

Answer 2

The if loop has changed, and it worked as needed. Below is the working code.

 if(Object.keys($rootScope.session).length === 0){ if(toState.name === "login"){ return; } else{ event.preventDefault(); $state.go('login'); } } else if(Object.keys(toState.permissions).length !=0){ angular.forEach(toState.permissions, function(value,key){ angular.forEach(value,function(role){ if(key === 'except' && role === $rootScope.session.role) {authorized = false;} else if(key === 'allow' && role !== $rootScope.session.role) {authorized = false;}; }); }); }; if(!authorized){ event.preventDefault(); $state.go('menu.dashboard'); };