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

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

我的Angular应用程序由多个功能模块组成。我通过Angular cli生成guard来使用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']);
}
}

从'@angular/core'导入{Injectable}；
从导入{CanActivate，ActivatedRouteSnapshot，RouterStateSnashot}
'角度/路由器'；
从“rxjs/Observable”导入{Observable}；
从'@angular/Router'导入{Router}；
@可注射（）
导出类AuthGuard实现了CanActivate{
构造函数（专用路由器：路由器）{}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnashot）：可观察的|承诺|布尔值
{
如果（[“用户”、“客户”、“购物车”].indexOf（localStorage.pass）>=0）{alert（“身份验证”）
卫兵！）；
返回true；}
其他的
this.router.navigate（['/login']）；
}
}

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

所以我在谷歌上搜索发现，在最后一条路径上添加逗号后，警告消失了

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

你知道为什么吗

编辑：我最终通过使用“canLoad”而不是“canActivate”使其工作，

---

但如果有人能提供更多关于这个问题的见解，那就太好了。

我最近遇到了一个类似的问题，在查看您的代码时，我注意到了两件事： -您将Authguard放置在登录路径中，即使它是访问路径。 -在保护中不返回负值，只需重定向

---

试着解决这两件事，也许会有帮助。当我在否定的情况下没有返回值时，我遇到了一个问题，它导致了与您遇到的问题相同的问题。

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

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

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

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

---

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

---

这是我的问题。

我已经有一整天的问题了。我们也发现了这一点，但没有任何东西可以清楚地解释这个问题

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

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

希望它能帮助别人

---

Cheers

我在react应用程序中也遇到了同样的问题，我试图导航到另一个页面。在将导航代码放入时间间隔循环的情况下，确实会出现此问题

在我的例子中，我尝试了

window.location.href

以及下面的反应方式

import createBrowserHistory from 'history/createBrowserHistory';

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

要解决此问题，您必须在导航到其他页面之前清除timeintervel 使用以下代码清除间隔

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

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

---

我试图重用route guard，它有代码重定向到同一个页面（在返回true之前）。若您试图加载一个路径并在canActivate中重定向到同一路径，那个么它将导致无限循环。要修复，请删除重定向部分（不需要），将逻辑分离到另一个服务。

如果我从路由模块中删除canActivate auth guard，则应用程序工作正常。在我的情况下，由于

canActivate

而没有发生此问题，但我在无限循环中从EffectsHanks调用相同的操作以获取答案。我通过在路线中使用“canLoad”而不是canActivate使其工作。