登录重定向导致Angular 2的ui路由器中出现无限循环

Question

我正在Angular 2中使用UI路由器来路由

UIRouterModule.forRoot({ 
states: APP_STATES, 
useHash: true,
config: routerConfigFn,
otherwise: { state: 'home' }
})

主状态需要auth:

export const homeState = {
parent: 'app',
name: 'home',
url: '/home',
component: HomeComponent,
data: {requiresAuth: true}
};

因为它需要auth，所以我使用下面的示例重定向到登录页面：https://github.com/ui-router/sample-app-angular/blob/master/src/app/global/auth.hook.ts

export function requiresAuthHook(transitionService: TransitionService) {
const requiresAuthCriteria = {
to: (state) => state.data && state.data.requiresAuth
};
const redirectToLogin = (transition) => {
const authService: AuthService = transition.injector().get(AuthService);
const $state = transition.router.stateService;
if (!authService.isAuthenticated()) {
return $state.target('login', undefined, { location: false });
}
};
transitionService.onBefore(requiresAuthCriteria, redirectToLogin, {priority: 10});
}

但当我启动应用程序时，它进入了一个无限循环。我的登录状态不需要auth，$state.target('login)仍然运行requiresAuthHook。

Answer 1

我问这个问题已经有一段时间了，但我终于解决了这个问题。我现在使用的不是onBefore钩子，而是onStart。我不完全确定为什么这能解决问题，因为在生命周期中，onBefore在onStart之前。

无论如何，切换到onStart确实解决了问题。

注意：在$state.target中，删除｛location:false｝，否则重定向时不会更新URL。因此，它应该是：$state.target("登录"，未定义，｛｝)；或者简单地，$state.targe("登录")；