为什么使用ui-router transition onBefore Hook 迭代transitions很多次?

Why does using ui-router transition onBefore Hook iterate transitions many times?

我正在使用 angular v1.6.1 和 ui-router v1.0.6 onBefore TransitionHook。

我正在尝试验证用户是否将活动订阅设置为 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
    }
})  

示例输出:

当您在 UI-Router 中重定向转换时,它会中止原始转换。然后,它开始 新转换 到您的目标状态。当新的转换 运行s.

时,您的挂钩将被第二次处理

一种选择是将挂钩中的 "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;
});