angularjs - 当 $state.go 调用 $stateChangeStart 时，Angular 1.4.1 UI 路由器 10 $digest() 迭代

Question

我有一个需要授权的状态。我听$stateChangeStart事件，如果 toState.data.protected并且用户没有被授权我打电话e.preventDefault()和 $state.go('login') .

当我在根 url 中打开应用程序时，我会自动重定向到 protected 状态。
这会导致 10 个 $digest 循环，当我在根 url 中打开应用程序时，我最终处于登录状态，并且我会自动重定向到 protected 状态。
Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
请参阅此 plnkr:http://plnkr.co/edit/1voh7m?p=preview

我成功地在不同的项目中使用了类似的代码， Angular 为 1.2.26，没有错误。

示例代码 angular 1.4.1, ui.router 0.2.15 :

//config block
$urlRouterProvider.otherwise('/main');   
$stateProvider
 .state('main', {
   url: '/main',
     templateUrl: 'main.html',
     controller: 'MainController as main',
     data: {'protected': true}
 }) 
 .state('login', {
     url: '/login',
     templateUrl: 'login.html',
     controller: 'LoginController as login'
 });

// in a run block
$rootScope.$on("$stateChangeStart", function (event, toState) {
    if (!event.defaultPrevented && toState.data &&
            toState.data.protected) {
        // the user is not authorized, do not switch to state
        event.preventDefault();
        // go to login page
        $state.go('login');
    }
});

你知道是什么导致循环吗？

我想知道事情是否会像这样发生:

拦截到 main.submain 状态的转换

开始转换到登录状态

UI路由器获取第一次转换被取消的信息

UI 路由器运行 $urlRouter.update()并开始过渡到 main.submain

编辑:简化的状态配置。

Answer 1

这是 UI.Router 的问题 – 在 Github 上查看此问题:https://github.com/angular-ui/ui-router/issues/600

基本上，如果您使用 .otherwise('/main') (@Grundy 也指出)然后 url 更改为 /main当路径无法解析时。后 $locationChangeSuccess我的监听器被调用，我使用 event.preventDefault() 拒绝重定向.这会导致位置变回未知路径，从而导致再次使用回退路径。这会导致无限循环。解决办法是这样的:

$urlRouterProvider.otherwise(function($injector) {
  var $state = $injector.get('$state');
  $state.go('main');
});

你可以声明一个被调用的函数 $injector并且您可以重定向到您的主状态(或 404)，而无需来回更改位置。感谢 Github 上的人，我应该在发布这个问题之前搜索过那里。

工作电话:http://plnkr.co/edit/eQXaIk