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

在我的身份验证防护中，我写了防止用户访问未授权路由的条件：

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中检测到重复路径中的警告。我们将采用检测到的最新版本并将其覆盖以节省重建时间。您应该执行完整的构建，以验证您的路线没有重叠。

所以我用Google搜索它，发现this comment，在最后一个路径中添加了逗号后，警告消失了。

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

有什么想法吗？

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

Answer 1

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

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

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

Answer 4

我最近遇到了类似的问题，看着您的代码，我注意到了两件事： -即使是访问路径，也可以将Authguard放置在登录路径中。 -您不会在防护罩中返回负值，只需重定向即可。

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

Answer 5

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

Answer 6

我已经整天遇到了这个问题。也找到了此official post，但在这里没有清楚地解释问题的原因。

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

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

希望它对某人有帮助！

欢呼

Answer 7

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

在我的情况下，我尝试了window.location.href以及下面的反应方式

从“ history / createBrowserHistory”导入createBrowserHistory；

let history = createBrowserHistory（{forceRefresh：true}）; history.push（“ / mypage”）;

要解决此问题，您必须先清除timeintervel，然后再导航到另一页使用下面的代码清除间隔

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

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

节流历史状态更改以防止浏览器挂起

7 个答案: