设置 urlRouteProvider.otherwise 时的 Angular ui-router 无限循环

Question

我得到了这段代码的无限循环：

    $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
        var isLoggedIn = (authService.authentication && authService.authentication.isAuth);
        if (isLoggedIn) {
            //if user is logged and tries to access login page, prevent it
            if (toState.name === 'app.login') {
                event.preventDefault();
                return fromState;
            } 
        } else {
            if (toState.name !== 'app.login') {
                event.preventDefault();
                $state.go('app.login');
                return;
            }
        }
    });

我也有这套：

function config($stateProvider, $urlRouterProvider, $ocLazyLoadProvider) {
    $urlRouterProvider.otherwise('/main');

    $stateProvider
    .state('app', {
        abstract: true,
        url: '',
        controller: 'mainCtrl',
        controllerAs: 'mainCtrl',
        template:'<div ui-view></div>'      
    })
    .state('app.login', {
        url: '/logn'
        controller: 'loginCtrl',
        controllerAs: 'loginCtrl',
        templateUrl: 'app/security/login.html'
    })
    .state('app.main', {
        url: '/main'
        controller: 'mainCtrl',
        controllerAs: 'mainCtrl',
        templateUrl: 'app/main.html'
    })
    ...
}

现在，当用户进入站点并且必须经过身份验证时，我得到了无限的摘要循环。 它是这样的：

1. 用户输入地址即：http://localhost
2. 默认路由（否则）触发并将用户重定向到http://localhost/#/main
3. $OnStateChangeStart 触发（用于 app.main）并测试用户是否已登录，如果未登录，则阻止默认事件结束重定向到 'app.login ';
4. $OnstateChangeStart 触发（用于 app.login）并测试 toState.name 是否为 app.login'，如果是，则无需重定向，因此返回。李>
5. 我不知道为什么，但是 $OnStateChangeStart 再次触发，但对于 app.main。 一遍又一遍地结束它。

请帮忙。

Answer 1

将 otherwise() 方法声明更改为状态名称转换，而不是您当前使用的 URL 转换。当我遇到这个问题时，这为我解决了。

这是一个例子：

$urlRouterProvider.otherwise(function($injector, $location){
  $injector.invoke(['$state', function($state) {
    $state.go('app.main');
  }]);
}); 

获取$state 并执行$state.go 的另一种方法是

var $state = $injector.get('$state');
$state.go('app.main');

我在 Angular 方面不是很有经验，所以我不知道为什么会解决这个问题，所以如果有人可以详细说明，请做！

更新

SO post 中接受的答案似乎很好地解释了为什么会发生这种情况。