当我在 Angular 2 中使用 guard children 路由时，浏览器完全被阻止

Question

当我在我的“pre-harvest”子路径中使用 RoleGuard 并打开浏览器时，浏览器被完全阻止，它似乎处于无限循环中。我没有任何编译问题，我无法打开控制台查看我有什么错误。

可以在子路径中使用 canActivate 吗？或者我应该使用 CanActivateChild？我的 CanActivateChild 没有这个问题。

const preHarvestRoutes: Routes = [
  {
    path: '',
    component: PrivateComponent,
    canActivate: [AuthGuard],
    children: [
      {
        path: 'pre-harvest',
        component: PreHarvestComponent,
        canActivate: [RoleGuard],  <------- IF I REMOVE THIS I DO NOT HAVE ANY PROBLEM.
        children: [
          {
            path: 'new-field',
            component: NewFieldComponent
          },
        ]
      }
    ]
  }
];

角色保护：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
import { UserRolesService } from '../services/user-roles.service';
import { webStorage } from "../utils/web-storage";

@Injectable()
export class RoleGuard implements CanActivate    {

    constructor(
        private userRoles: UserRolesService
        , private router: Router
    ) { }

    canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot )    {
        //let roles = route.data['roles'] as Array<string>;
        //let rolesUserLogged = webStorage.user;

        this.router.navigate( ['pre-harvest'] );

        return true;
    }
}

Answer 1

您正在重定向到与 RoleGuard 所在位置相同的路线。这显然会导致无限循环。您应该将 RoleGuard 更改为：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
   //let roles = route.data['roles'] as Array<string>;
   //let rolesUserLogged = webStorage.user;
   return true;
}

您仍然需要指定您的 RoleGuard 逻辑，但您遇到的问题是重定向到同一路由。

当我在 Angular 2 中使用 guard children 路由时，浏览器完全被阻止

Browser totally blocked when I use guard children route in Angular 2

guard

angular2-routing

canactivate

angular