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

Ramping up on angular, and ui-router

在角度和ui路由器上加速

And struggling with redirecting to a different state if a precondition is not met:

如果不满足前提条件,则努力重定向到不同的状态:

I tried using an interceptor: (How do I preform a redirect in an angular interceptor).

我尝试使用拦截器:(如何在角度拦截器中预先形成重定向)。

But someone mentioned that handling $stateChangeState would be more appropriate. But I am still running into an infinite loop:

但有人提到处理$ 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');
                }
            })
        }
    });

Can anyone suggest a better pattern (one that works)

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

Thanks!

Note: Similar problem different approach here: How do I preform a redirect in an angular interceptor

注意:类似的问题不同的方法:如何在角度拦截器中预先形成重定向

1 个解决方案

#1

I don't think there's anything wrong with the general way you're trying to do this, though I'm not an expert. I do see a flaw in the implementation which looks like it could cause an infinite loop. Let's say the user tries to go to 'user.new' state. Your $stateChangeStart listener intercepts that, cancels it, does your customGET; then if the inner if condition is true (resp.hasOwnProperty('id')), you try to send the user to the same 'user.new' state. At which point, your $stateChangeStart listener intercepts it, cancels it, etc., over and over.

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

The way I avoid this problem in my code is to have a variable (in the service where I declare the listener) to help me bypass that check: var middleOfRedirecting = false; Inside your inner if block within the resp.hasOwnProperty('id') check, set middleOfRedirecting to true; add a condition at the start of your $stateChangeStart listener to only call event.preventDefault() and redirect if middleOfRedirecting is false. You also would need a $stateChangeSuccess listener to set middleOfRedirecting back to false, resetting it for the next state change. (I feel like there should be a better way than this, but it at least works.)

我在代码中避免这个问题的方法是让一个变量(在我声明监听器的服务中)帮助我绕过那个检查:var middleOfRedirecting = false;在resp.hasOwnProperty('id')内的内部if块内检查,将middleOfRedirecting设置为true;在$ stateChangeStart侦听器的开头添加一个条件,只调用event.preventDefault(),如果middleOfRedirecting为false,则重定向。您还需要一个$ stateChangeSuccess侦听器将middleOfRedirecting设置为false,将其重置为下一次状态更改。 (我觉得应该有比这更好的方法,但它至少有效。)

秒客网

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

1 个解决方案

#1

#1

相关文章