angularjs - ui-router $stateChangeStart 上的无限循环

Question

加强 Angular 和ui-router

如果不满足先决条件，则很难重定向到不同的状态:

我尝试使用拦截器:( How do I preform a redirect in an angular interceptor )。

但是有人提到处理 $stateChangeState 会更合适。但我仍然陷入无限循环:

    /**
     *  Check here for preconditions of state transitions
     */
    $rootScope.$on('$stateChangeStart', function(event, toState) {

        // which states in accounts to be selected
        var accountRequiredStates = ['user.list', 'user.new'];
        if(_.contains(accountRequiredStates, toState.name)){
            event.preventDefault();
            ApiAccount.customGET('get_current').then(function(resp){
                // if I have a selected account, go about your business
                if(resp.hasOwnProperty('id')){
                    $state.go(toState.name);
                } else { // prompt user to select account
                    $state.go('user.select_account');
                }
            })
        }
    });

任何人都可以建议一种更好的模式(有效的模式)

谢谢!

<小时/>

注意:类似问题不同的方法在这里:How do I preform a redirect in an angular interceptor

Answer 1

尽管我不是专家，但我认为您尝试执行此操作的一般方式没有任何问题。我确实看到了实现中的一个缺陷，看起来它可能会导致无限循环。假设用户尝试进入“user.new”状态。你的 $stateChangeStart 监听器拦截它，取消它，做你的 customGET;然后，如果内部 if 条件为 true (resp.hasOwnProperty('id'))，您会尝试将用户发送到相同的“user.new”状态。此时，您的 $stateChangeStart 监听器会一遍又一遍地拦截它、取消它等等。

我在代码中避免此问题的方法是使用一个变量(在我声明监听器的服务中)来帮助我绕过该检查:var middleOfRedirecting = false; 在 resp.hasOwnProperty('id') 检查的内部 if block 内，将 middleOfRedirecting 设置为 true；在 $stateChangeStart 监听器的开头添加一个条件，以便仅调用 event.preventDefault() 并在 middleOfRedirecting 为 false 时进行重定向。您还需要一个 $stateChangeSuccess 监听器将 middleOfRedirecting 设置回 false，为下一个状态更改重置它。 (我觉得应该有比这更好的方法，但至少有效。)