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

Throttling history state changes to prevent the browser from hanging

提问by Vibhu

This is a beginner angular question.

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

My Angular Application comprises of multiple feature modules.I used authguard by generating guard from the angular-cli and then I use CanActivate in my app-routing module like so :

我的 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 { }

In my auth guard I have written the condition to prevent the user from accessing unauthorized routes :

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

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']);
}
}

after building I get a warning WARNING in Duplicated path in loadChildren detected during a rebuild. We will take the latest version detected and override it to save rebuild time. You should perform a full build to validate that your routes don't overlap.

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

So i googled it and found this comment,after adding comma to the last path the warning disappeared.

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

But after that I logged in to my application and the following message appeared in the console : Throttling history state changes to prevent the browser from hanging and app got stuck.

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

Any ideas why?

任何想法为什么？

EDIT : I finally got it to work by using 'canLoad' instead of 'canActivate', but it would be great if someone could provide some more insight regarding this issue.

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

回答by Paqura

Delete canActivate in login route. It's loop.

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

回答by Enrico

In my case I had an infinite loop.

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

If you are using a wildcard (*) in your routing make sure that it is the last one in the list. You should define all other routes first.

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

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

回答by Nanda Kishore Allu

Check in the Gaurd one of the path's is trying to load multiple times as a loop. This was my issue..

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

回答by bab2683

I recently had a similar problem and watching your code i noticed 2 things: - You place the Authguard in the login path, even though is the access path. - You don't return a negative value in the guard, you just redirect.

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

Try fixing these 2 things and maybe it'll help. I had a problem when I returned no value in the negative case and it caused me the same problem you are experiencing.

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

回答by MiguelSsSRrR

I already had this issue for the whole day. Found as well this official post, but nothing explain clearly the problem here.

我已经一整天都遇到了这个问题。也找到了这个官方帖子，但没有清楚地解释这里的问题。

I was debugging the problem, and I found that my canActivate function had an error, trying to access to a property of an object that it was not initialised. I didn′t realized about it, and after this error (you will not see in console), the problem "Throttling history state changes to prevent the browser from hanging" started to trigger in a lopp...

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

Just my 2 cents: Make sure you don′t have any error in the function canActivate or canDeactivate.

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

Hope that it helps someone!

希望它可以帮助某人！

Cheers

干杯

回答by Riyas K Salim

Me too had the same issue in my react application in which i try to navigate to another page. This issue really happens due to in the case where you put the navigation code in a timeinterval loop.

我在我的 React 应用程序中也遇到了同样的问题，我尝试导航到另一个页面。这个问题确实发生在你把导航代码放在时间间隔循环中的情况下。

In my case i tried window.location.href and also the react way below

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

import createBrowserHistory from 'history/createBrowserHistory';

从'history/createBrowserHistory'导入createBrowserHistory；

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

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

to fix this issue you have to clear the timeintervel before navigating to another page use below code to clear the interval

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

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

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