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

Question

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

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

发生的是 onBefore 钩子(Hook)只是迭代或被多次调用(x20)。

我一定是错过了什么或不理解。我有 onStart 钩子(Hook)可以正常工作。

//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 中重定向转换时，它会中止原始转换。然后它会开始新的过渡到您的目标状态。当新的转换运行时，你的钩子(Hook)会被第二次处理。

一种选择是将"private.location.billing" 列入白名单。状态在你的钩子(Hook)里。这将导致钩子(Hook)为任何 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;
});