为什么使用ui-router转换onBefore Hook迭代转换多次？

Question

我在TransitionHook之前使用angular v1.6.1和ui-router v1.0.6。

我正在尝试验证用户是否将有效订阅设置为true。此值在用户对象上设置。当他们登录并尝试点击任何路由时，我想检查以确保他们有活动订阅，如果没有重新路由到计费模块，那么他们可以更新他们的付款方式。即使他们在应用程序中并尝试单击另一条路线，我也希望将它们重新路由到结算，直到满足该情况为止。

onBefore钩子只是迭代或多次调用（x20）会发生什么。

我必须遗漏某些东西或不理解。我有onStart钩子，工作正常。

// app.ts运行

    $trace.enable("TRANSITION");

    $transitions.onBefore({ to: "private.**" }, (trans) => {
        //trans.$to().data.authorization  = true
        //authService.isLoggedIn() method = true
        //$sessionStorage.profile.hasActiveSubscription = false
        if (trans.$to().data.authorization && authService.isLoggedIn() && !$sessionStorage.profile.hasActiveSubscription) {
            return trans.router.stateService.target("private.location.billing");  
        }
        return true;
    });

    $transitions.onStart({}, trans => {
        if (trans.$to().data && trans.$to().data.authorization && !authService.isLoggedIn()) {
            return trans.router.stateService.target("public.login");
        }
        return true;
    });

//路线

.state("private.location.billing",
{
    url: "/billing",
    views: {
        "tabContent": {
            component: "billing",
            data: { pageTitle: "Location Billing" }
        }
    },
    ncyBreadcrumb: {
        label: "Location Billing"
    },
    data: {
        authorization: true
    }
})  

示例输出：

Answer 1

当您在UI-Router中重定向转换时，它会中止原始转换。然后它会启动新转换到您定位的状态。新转换运行时，第二次处理您的挂钩。

一种选择是将挂钩中的"private.location.billing"状态列入白名单。这会导致挂钩针对private.**的任何private.location.billing状态运行，除之外。

$transitions.onBefore({ to: "private.**" }, (trans) => {
    const to = trans.to();
    if (to.name !== "private.location.billing" && to.data.authorization && authService.isLoggedIn() && !$sessionStorage.profile.hasActiveSubscription) {
        return trans.router.stateService.target("private.location.billing");  
    }
    return true;
});