Как работать с CanActivate при обновлении браузера Angular 4

Question

У меня есть приложение, в котором мне нужно защищать маршруты на основе ролей для конкретного пользователя. В моем приложении есть проверка подлинности Windows, поэтому для этого есть отдельная страница входа в систему, поэтому я вызываю метод входа непосредственно из app.component.ts. Все работает нормально, как в состоянии защитить маршруты, но при обновлении страницы он снова входит в систему, где данные о ролях задерживаются, то есть, когда компонент загружается, и ему не удается получить роли, поэтому он перенаправляет на страницу панели мониторинга (согласно моему требованию). в случае, если у любого пользователя нет прав на просмотр страницы). Я знал, что должен использовать наблюдаемые, но в моем случае код немного отличается. Может ли кто-нибудь предложить лучший способ добиться этого. Ниже приведен код

app.component.ts

ngOnInit() {
  this.commonService.getLogin().subscribe((data: any) => {
    this.appService.roles = data.roles;
  }});

app.service.ts

export class AppService {
  public roles: Role[];// Array of customized class

  getAccessForMenus(menuname: string) {
    let hideMenu = false;
    // Some code... based on some condition hide menu value will vary
    return hideMenu;
  }
}

можно активировать-guard.ts

@Injectable()
export class CanActivateAdmin implements CanActivate {
  constructor(private appService: AppService, private router: Router) { };

  canActivate(){

  if (!this.appService.getAccessForMenus('Admin')) {
    this.router.navigateByUrl('dashboard');
  }
  return true;
 }
}