限制历史状态更改以防止浏览器挂起

Question

这是一个初学者角度的问题。

我的角度应用程序包括多个功能模块。我通过从角cli生成保护来使用AuthGuard，然后在我的应用路由模块中使用CanActivate，如下所示：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AuthGuard } from './auth.guard';

const routes: Routes = [
{path:'login',loadChildren:'./login/login.module#LoginModule',canActivate: 
[AuthGuard]},
{path:'home', loadChildren:'./user/user.module#UserModule',canActivate: 
[AuthGuard]},
{path:'cart', 
loadChildren:'./cart/cart.module#CartModule',canActivate:[AuthGuard]},
 {path:'customer',loadChildren:'./customer/customer.module#CustomerModule',canActivate:[AuthGuard]}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

在我的auth guard中，我编写了防止用户访问未经授权的路由的条件：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from 
'@angular/router';
import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';

@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean 
{
  if(["user","customer","cart"].indexOf(localStorage.pass)>=0){alert("auth 
guard!");
return true;}
else 
this.router.navigate(['/login']);
}
}

构建后，在重建期间检测到loadChildren中的重复路径中出现警告。我们将采用检测到的最新版本并覆盖它以节省重建时间。您应该执行完整构建以验证您的路由是否不重叠。

所以我谷歌了一下，发现了这个评论，在最后一条路径上加上逗号后，警告消失了。

但在此之后，我登录到我的应用程序，控制台中出现了以下消息：限制历史状态更改以防止浏览器挂起，应用程序被卡住。

有什么想法为什么？

编辑：我最终通过使用“canLoad”而不是“canActivate”实现了它，但如果有人能提供关于这个问题的更多见解，那就太好了。

Answer 1

签入Gaurd路径中的一个正在尝试作为循环加载多次。这是我的问题。。

Answer 2

在我的例子中，我有一个无限循环。

如果在路由中使用通配符（*），请确保它是列表中的最后一个。您应该首先定义所有其他路由。

{ path '/', component: HomeComponent },
{ path 'profile', component: ProfileComponent },
// All your other routes should come first    
{ path: '404', component: NotFoundComponent },
{ path: '**', component: NotFoundComponent }

Answer 3

删除登录路由中的canActivate。是循环。