Я пытаюсь заблокировать все изменения состояния ui-router, пока я не аутентифицировал пользователя:
$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)
}
})
Я отклоняю все изменения состояния до тех пор, пока пользователь не будет аутентифицирован, но если я перейду на неверный URL-адрес, который использует конфигурацию otherwise(), я получаю бесконечный цикл с сообщением:
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"]]
Ниже приведена SSCCE. Подайте его с помощью python -m SimpleHTTPServer 7070 и перейдите к localhost:7070/test.html#/bar, чтобы увидеть, как он взорвался в вашем лице. Если прямое перемещение к единственному действительному местоположению углов не взорвется 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>
Есть ли альтернативный метод, который я должен использовать для выполнения этой блокировки аутентификации? Я понимаю, что эта блокировка аутентификации является только клиентской. Я не показываю серверную часть вещей в этом примере.
