Angular导航在路由保护中导致无限循环

Question

我有这些路由:

{path: '', redirectTo: 'login', pathMatch: 'full'},
{path: 'todos', component: TodosComponent, canActivate: [AuthGuard]},
{path: 'add-todo', component: AddTodoComponent, canActivate: [AuthGuard]},
{path: 'todo/:id', component: TodoComponent, resolve: {
todo: TodoResolver
},  canActivate: [AuthGuard]
},
{path: 'login', component: LoginComponent, canActivate: [IsLoggedIn]},
{path: '**', redirectTo: ''}
]

With this guard:

export class IsLoggedInGuard implements CanActivate {
constructor(private storageService: StorageService, private router: Router, private authService: AuthService) {}
canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
const user = this.storageService.getFromStorage('user');
if(user) {
this.authService.setUser(user, false);
this.router.navigate(['todos']);
return false;
}
return true;
}
}

在本地工作得很好，但是当我部署它时，它进入了一个无限循环。

为什么会有一个无限循环，我如何解决它?

Answer 1

要解决这个问题，你应该确保IsLoggedInGuard保护只应用于登录路由，而不是任何其他路由。你可以这样修改路由配置:

{
path: 'login',
component: LoginComponent,
canActivate: [IsLoggedInGuard]
},
{
path: 'todos',
component: TodosComponent,
canActivate: [AuthGuard]
},
{
path: 'add-todo',
component: AddTodoComponent,
canActivate: [AuthGuard]
},
{
path: 'todo/:id',
component: TodoComponent,
resolve: {
todo: TodoResolver
},
canActivate: [AuthGuard]
},