angularjs - 设置 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 中接受的答案似乎很好地解释了为什么会发生这种情况。