当我在角2中使用警卫子路由时，浏览器完全阻塞。

Question

当我在‘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
          },
        ]
      }
    ]
  }
];

RoleGuard：

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逻辑，但是您面临的问题是重定向到相同的路由。