登录重定向导致 ui-router for Angular 无限循环 2

Login redirect leads to infinite loop in ui-router for Angular 2

我在 Angular 2 中使用 UI 路由器进行路由

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

家乡状态需要授权:

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

因为它需要身份验证,所以我使用此处的示例重定向到登录页面: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});
}

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

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

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

注意:: 在 $state.target 中,删除 {location: false} 否则 URL 不会在重定向时更新。所以,应该是: $state.target('login', 未定义, {});或者简单地说, $state.targe('login');