Angular 8 - canActivate 中的无限循环，因为路由始终为空答案

【问题标题】：Angular 8 - Infinite loop in canActivate as route is always emptyAngular 8 - canActivate 中的无限循环，因为路由始终为空
【发布时间】：2020-07-16 23:05:56
【问题描述】：

我试图在登录后根据角色将用户路由到不同的组件。

但是当我路由时，我在 canActivate 中得到一个无限循环，因为路由 url 始终为空，这应该只在第一次为真，第二次应该是路径“/admin”或“/user”。

App-routing.module.ts

const routes : Routes = [
  { path : ''  , redirectTo : '', pathMatch: 'full' , canActivate : [RedirectGuardService] },
  { path : 'admin' , component : DashboardComponent , canActivate : [AuthGuardService], data : { role : 'admin'}},
  { path : 'user' , component : UserComponent , canActivate : [AuthGuardService], data : { role : 'user'}},
];

重定向-guard.service.ts

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) : Observable<boolean> | Promise<boolean> | boolean {
  const role = localStorage.getItem("role");
  if (role) {  
    alert("navigate to the right detination based on role");    
    this.router.navigate(['/'+ role]);
    return true;      
  }      
  this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
  return false;
}

我没有包含 AuthGuardService 的代码，因为它永远不会命中该代码。
alert("根据角色导航到正确的目的地");无限显示。
路由：ActivatedRouteSnapshot 始终为空：(url:'')

【问题讨论】：

配置中的第一个路由，'' 重定向到 ''。也许这导致了无限循环？
有可能，我测试一下。
一个小建议似乎很奇怪，您要根据从本地存储中读取的内容来决定角色和位置或导航。您确实知道任何人都可以随时编辑它并将其角色更改为管理员，对吗？只是提醒一下安全问题:)
是的，我知道，他们可以改变他们的角色，但他们只能查看图形部分，因为我已经保护了后端，所以他们无论如何都无法获取任何数据。根据我的阅读，这应该是处理角色的首选方式。

标签： angular

【解决方案1】：

原来是我从 localStorage.getItem("role") 得到的角色是第一个大写字母，并且路由数据角色都是小写的，所以最终找不到 url 并无限运行。它仍然是一个糟糕的行为，因为 route ** 应该抓住了这一点。但我现在可以继续前进。

【讨论】：

【解决方案2】：

编辑：找出罪魁祸首！在 app.module.ts 你需要先导入 AuthModule。这样做将允许您在“auth-routing.module.ts”或“app-routing.module.ts”中使用路径“**”

@NgModule({

  imports: [
    AuthModule,
    AppRoutingModule,
    BrowserModule,
    HttpClientModule,
    SharedModule
  ],
})

我也遇到了无限循环问题。不确定这是否与您的有关，但对我来说，我有两个路由文件。 'app-routing.module.ts' 和 'auth-routing.module.ts'。我将下面的代码从“app-routing.module.ts”移动到“auth-routing.module.ts”，不再有无限循环！希望这对您有所帮助！

 {
    path: '**',
    redirectTo: 'my-route',
  }

【讨论】：

我一定会在这些日子里试一试，如果结果正确，我会给你一些信任，谢谢你的提示！