Rutwick Gangurde Rutwick Gangurde - 1 year ago 172
Javascript Question

Angular ui router - Redirection doesn't work at all

I'm using

for routing in my Angular app. There is a typical login scenario, where I'm redirecting a user to the login url if he's not logged in. Without the ui.router library, this worked fine using $routeChangeStart event combined with
. Now, I'm using the
event, combined with
, and the nothing works! It also sends my browser into an infinite loop. I read from other sources that this is a known bug, and none of the suggested solutions work for me. Moreover,
too doesn't redirect to the login page.

This is how I've configured my paths:

.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
.state('main', {
url: '/',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
.state('about', {
url: '/about',
templateUrl: 'views/about.html',
controller: 'AboutCtrl'
.state('login', {
url: '/login',
templateUrl: 'views/loginform.html',
controller: 'LoginCtrl'

And my

.run(['$state', '$rootScope', '$location', function($state, $rootScope, $location) {
//Check when routing starts
//event, next, current
$rootScope.$on( '$stateChangeStart', function(e, toState, toParams, fromState, fromParams) {
//Redirect to login if the user is not logged in
if (!isUserLoggedIn) {

//Some suggestion
console.log('Not logged in');

//Infinite loop, kills my browser!

//Some suggestion
$state.go('login', { url: '/login'});

//Doesn't work

//$location.path( $state.href('login');

Answer Source

What we would need here, is to do NOT redirect, if the state TO is already the 'login'.

Just a drafted adjustment would be

$rootScope.$on( '$stateChangeStart', function(e, toState  , toParams
                                               , fromState, fromParams) {

    var isLogin = === "login";


       return; // no need to redirect anymore 

And also, we should call $state.go('login'); with the event.preventDefault();

 // also prevent default on redirect

Please check this Q & A How can I fix 'Maximum call stack size exceeded' AngularJS And a plunker with similiar solution

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download