登录重定向导致 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');
我在 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');