Браузер зависает при попытке использовать угловую защиту для маршрутизации на основе роли пользователя

Question

Я только начал использовать angular6, и в настоящее время у меня возникают проблемы с использованием защиты, предоставляемой angular, для маршрутизации на разные страницы в зависимости от роли пользователя. у меня 3 главные роли в приложении

Это мой AuthGard auth.guard.ts

export class AuthGuard implements CanActivate {
constructor(private auth: AuthService,
    private router: Router) { }
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | 
boolean {
console.log(this.auth.isLoggedIn())
if (this.auth.isLoggedIn()) {
  return true;
}  

this.router.navigate(['/login'], { queryParams: { returnUrl: state.url } })
return false;
}
}

это моя роль. Guard role.guard.ts

export class RoleGuard implements CanActivate {
  constructor(private _auth: AuthService, private _router: Router) { }

canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
switch (this._auth.getRole()) {
  case "STUDENT":
    this._router.navigate(['/']);
    return true;
  case "DEPARTMENT":
    this._router.navigate(['/department']);
    return true;
  case "FACULTY":
    this._router.navigate(['/faculty']);
    return true;
  default:
    return false;
   }
  }
}

и мой модуль student.module.ts

{ path: '', component: DashboardComponent, canActivate: [AuthGuard, RoleGuard] },
  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard, RoleGuard] }

что мне не хватает?

Answer 1

Убедитесь, что вы не включили их в провайдеры app.module.ts, когда вы используете angular 6 и выше, потому что сервисы уже предоставлены в: 'root'. пример:

@Injectable({
  providedIn: 'root'
})