How to make a component dependent on a role?

Question

Angular

Hello, there is such a problem, I have a component that displays a page and works with it depending on the role. At first, there was nothing to do in one component, the logic of functionality and layout depending on the roles, but the further, the more difficult it is to work with the page, how you can refactor / simplify development. An example of such code:

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;
        }
    }

Answer 1

https://angular.io/guide/router#milestone-5-route-...