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

Question

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

我的 Angular 应用程序包含多个功能模块。我通过从 angular-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 中的重复路径中的警告。我们将采用检测到的最新版本并覆盖它以节省重建时间。您应该执行完整构建以验证您的路线不重叠。

所以我用谷歌搜索它并找到this comment，在最后一条路径添加逗号后警告消失了。

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

有什么想法吗？

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

Answer 1

在我尝试导航到另一个页面的反应应用程序中，我也遇到了同样的问题。由于您将导航代码置于时间间隔循环中，因此确实会发生此问题。

就我而言，我尝试了window.location.href 以及下面的反应方式

import createBrowserHistory from 'history/createBrowserHistory';

 let history=createBrowserHistory({forceRefresh: true});
history.push("/mypage");

要解决此问题，您必须在导航到另一个页面之前清除时间间隔 使用下面的代码清除间隔

this.gameSeed = setInterval(() => {//your code to navigate }, 100);

clearInterval(this.gameSeed);
this.gameSeed = null;

Answer 2

我试图重用路由守卫，它有代码重定向到同一页面（在返回 true 之前）。如果您尝试在 canActivate 中加载路径并重定向到同一路径，则会导致无限循环。为了解决这个问题，删除了重定向部分（不需要），将逻辑分离到另一个服务中。

Answer 3

我一整天都遇到这个问题。也找到了这个official post，但这里没有什么能清楚地解释问题。

我在调试问题时，发现我的 canActivate 函数出错，试图访问未初始化的对象的属性。我没有意识到这一点，在这个错误之后（你不会在控制台中看到），“限制历史状态更改以防止浏览器挂起”的问题开始在 lopp 中触发......

只需我的 2 美分：确保函数 canActivate 或 canDeactivate 没有任何错误。

希望对某人有所帮助！

干杯

Answer 4

在 Gaurd 中检查路径之一正在尝试作为循环多次加载。 这是我的问题..

Answer 5

就我而言，我有一个无限循环。

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

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

Answer 6

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

Answer 7

我最近遇到了类似的问题，看了你的代码我注意到了两件事： - 您将 Authguard 放在登录路径中，即使是访问路径。 - 你不会在守卫中返回负值，你只是重定向。

尝试修复这 2 件事，也许会有所帮助。当我在否定情况下没有返回任何值时，我遇到了一个问题，这导致了我遇到的同样的问题。