Menu
I'm trying to block all ui-router state changes until I've authenticated the user:
$rootScope.$on('$stateChangeStart', function (event, next, toParams) {
if (!authenticated) {
event.preventDefault()
//following $timeout is emulating a backend $http.get('/auth/') request
$timeout(function() {
authenticated = true
$state.go(next,toParams)
},1000)
}
})
I reject all state changes until the user has been authenticated, but if I go to an invalid URL that uses the otherwise() configuration, I get an infinite loop with a message:
Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: [["fn: $locationWatch; newVal: 7; oldVal: 6"],["fn: $locationWatch; newVal: 8; oldVal: 7"],["fn: $locationWatch; newVal: 9; oldVal: 8"],["fn: $locationWatch; newVal: 10; oldVal: 9"],["fn: $locationWatch; newVal: 11; oldVal: 10"]]
Below is my SSCCE. Serve it up with python -m SimpleHTTPServer 7070 and go to localhost:7070/test.html#/bar to see it explode in your face. Whereas directly navigating to the only valid angularjs location does not blow up localhost:7070/test.html#/foo:
<!doctype html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
</head>
<body ng-app="clientApp">
<div ui-view="" ></div>
<script>
var app = angular.module('clientApp', ['ui.router'])
var myRouteProvider = [
'$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/foo');
$stateProvider.state('/foo', {
url: '/foo',
template: '<div>In Foo now</div>',
reloadOnSearch: false
})
}]
app.config(myRouteProvider)
var authenticated = false
app.run([
'$rootScope', '$log','$state','$timeout',
function ($rootScope, $log, $state, $timeout) {
$rootScope.$on('$stateChangeStart', function (event, next, toParams) {
if (!authenticated) {
event.preventDefault()
//following $timeout is emulating a backend $http.get('/auth/') request
$timeout(function() {
authenticated = true
$state.go(next,toParams)
},1000)
}
})
}
])
</script>
</body>
</html>
Is there an alternative method I should use to accomplish this authentication blocking? I do realize this authentication blocking is client side only. I'm not showing the server side of things in this example.
428
Looks like this is a bug with ui-router when you use the combination of $urlRouterProvider.otherwise("/foo) with the $stateChangeStart.
Issue - https://github.com/angular-ui/ui-router/issues/600
Frank Wallis provides a nice workaround, use the longer form of the otherwise method that takes a function as an argument:
$urlRouterProvider.otherwise( function($injector, $location) {
var $state = $injector.get("$state");
$state.go("app.home");
});
Nice work Frank!
89
Fakeout. This is an interaction issue between $urlRouterProvider and $stateProvider. I shouldn't be using $urlRouterProvider for my otherwise. I should be using something like:
$stateProvider.state("otherwise", {
url: "*path",
template: "Invalid Location",
controller: [
'$timeout','$state',
function($timeout, $state ) {
$timeout(function() {
$state.go('/foo')
},2000)
}]
});
Or even a transparent'ish redirect:
$stateProvider.state("otherwise", {
url: "*path",
template: "",
controller: [
'$state',
function($state) {
$state.go('/foo')
}]
});
Altogether now:
<!doctype html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
</head>
<body ng-app="clientApp">
<div ui-view="" ></div>
<script>
var app = angular.module('clientApp', ['ui.router'])
var myRouteProvider = [
'$stateProvider',
function($stateProvider) {
$stateProvider.state('/foo', {
url: '/foo',
template: '<div>In Foo now</div>',
reloadOnSearch: false
})
$stateProvider.state("otherwise", {
url: "*path",
template: "",
controller: [
'$state',
function($state) {
$state.go('/foo')
}]
});
}]
app.config(myRouteProvider)
var authenticated = false
app.run([
'$rootScope', '$log','$state','$timeout',
function ($rootScope, $log, $state, $timeout) {
$rootScope.$on('$stateChangeStart', function (event, next, toParams) {
if (!authenticated) {
event.preventDefault()
//following $timeout is emulating a backend $http.get('/auth/') request
$timeout(function() {
authenticated = true
$state.go(next,toParams)
},1000)
}
})
}
])
</script>
</body>
</html>
I also had this issue. Below is the code to workaround, which inspired by angular-permission project.
The main concept is to add a flag($$finishAuthorize) into state manually, and break the infinite loop by this flag. Another point we need to be aware is the {notify: false} option of $state.go, and broadcast "$stateChangeSuccess" event manually.
$rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
if (toState.$$finishAuthorize) {
return;
}
if (!authenticated) {
event.preventDefault();
toState = angular.extend({'$$finishAuthorize': true}, toState);
// following $timeout is emulating a backend $http.get('/auth/') request
$timeout(function() {
authenticated = true;
$state.go(toState.name, toParams, {notify: false}).then(function() {
$rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
});
},1000)
}
);
I also had this issue. Turns out it was the code that they suggested to make a trailing slash optional at https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-make-a-trailing-slash-optional-for-all-routes
$urlRouterProvider.rule(function ($injector, $location) {
var path = $location.url();
console.log(path);
// check to see if the path already has a slash where it should be
if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
return;
}
if (path.indexOf('?') > -1) {
return path.replace('?', '/?');
}
return path + '/';
});
changed this to
$urlRouterProvider.rule(function ($injector, $location) {
var path = $location.url();
// check to see if the path already has a slash where it should be
if (path[path.length - 1] === '/' || path.indexOf('/?') > -1) {
return;
}
if (path.indexOf('?') > -1) {
$location.replace().path(path.replace('?', '/?'));
}
$location.replace().path(path + '/');
});
not returning the new path and just replacing it doesn't trigger a StateChangeStart
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
