Как сделать компонент зависимым от роли?

Question

Leopandro @Leopandro

Разработчик CRM/ERP систем

Angular

Как сделать компонент зависимым от роли?

Здравствуйте, есть такая проблема, есть у меня компонент, который отображает страницу и работает с ней зависимости от роли. Сначала было ничего делать в одном компоненте логику функционала и верстку в зависимости от ролей, но чем дальше, тем сложнее работать со страницей, каким образом можно отрефакторить/упростить разработку. Пример такого кода:

ngOnInit() {
      this.model = this.formBuilder.group({
          id : '',
          datetime_order: '',
          number: '',
          legal_id : '',
          driver_id : '',
          from: '',
          comment: '',
          payment: 'noncash',
          price: 0,
          status,
          car_id : '',
      addresses: this.formBuilder.array([])
      });
        
      if(this.storage.getUserRole() == 'legal')
      {
          this.resolveRoute(this.route);
      }
      if (this.storage.getUserRole() == 'admin' || this.storage.getUserRole() == 'driver-manager'){
          let source = Observable.forkJoin(
              this.userService.getLegalsList(this.getUserListParams()),
              this.userService.getAll({params : {all:true,blocked:'0',role:'driver'}}),
              // this.route.data
              ).subscribe(([legals, drivers]) => {
                      this.resolveLegals(legals);
                      this.resolveDrivers(drivers);
                      this.resolveRoute(this.route);
                      (this.model.get('addresses') as FormArray).valueChanges.subscribe(values => {
                          this.getPrice();
                      });

                      this.model.get('from').valueChanges.subscribe(values => {
                          this.getPrice();
                      });

                      this.model.get('legal_id').valueChanges.subscribe(values => {
                          if (values)
                              this.getPrice()
                          else
                              this.profile = this.profileDefault;
                      });
                  }
              );
      }
      else {
          var legal_id = this.storage.getUserId();
          this.getProfile(legal_id);
          this.model.controls["legal_id"].setValue(legal_id);

      }

  		this.id = this.route.snapshot.params['id'];

      this.model.get('driver_id').valueChanges.subscribe(values => {
          this.carsList = [];
          if (values)
              this.carService.getAll({params : {all:true, driver_id:values}}).subscribe(data => {
                  var models = data['models'];
                  for (let item of models) {
                      this.carsList.push({
                        'id' : item['id'],
                        'name' : item['mark'] + ' ' + item['model'] + ' ' + item['car_number']
                      });
                  }
              });
          else
              this.carsList = [];
      });
  	}

    getPriceDisabled()
    {
        if (this.storage.getUserRole() == 'admin')
        {
            return false;
        }
        else
            return true;
    }
canAction()
    {
        if (this.storage.getUserRole() == 'admin' || this.storage.getUserRole() == 'driver-manager')
        {
            return true;
        }
        else
        {
            if (this.model.controls['status'].value == '5' || this.model.controls['status'].value == '4')
                return false;
            else
                return true;
        }
    }