为什么使用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;
});
我正在使用 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;
});