Enable role-based authorization in a SPEAK 3 application

Before you start, you should decide which parts of your application you need to limit access to. Restricting access can include disabling components and removing components from the interface for a set of users.

For example, an application provides functionality to edit the characteristics of the components in a form. While some users must have full access to all fields, you want to restrict access and make some fields read-only or completely hidden for some other users.

Once you have created a list of the areas of functionality that you want to security-enable, create a Sitecore item for each of these areas. These items are called "access items" in the rest of this topic.

You provide or restrict access using the Security Editor by granting and denying read and write access to the access items in the core database for specific accounts, such as users and roles. To keep things organized, create all access items under a root access folder for you application.

Your application requests the current user's access settings for the access items, and then enables, disables, shows or hides the related functionality accordingly.

Follow these steps to configure access items:

Follow these steps to configure your Angular application to use the access items:

In advanced scenarios, you may want to target different access folders in different parts of your application. To do this, import the SciAuthModule in all the parts of the application where you need it, with the corresponding access folder item ID.

For example, in section-a.module.ts:

import { SciAuthModule } from '@speak/ng-sc/auth';
@NgModule({
  imports: [
    SciAuthModule.withItemId('{DA4466EE-92C8-4D69-B4AB-2E0CA36ADD22}'),
  ],
})
export class SectionA { }

And then in section-b.module.ts:

import { SciAuthModule } from '@speak/ng-sc/auth';
@NgModule({
  imports: [
    // A different item-id.
    SciAuthModule.withItemId('{1727B934-FAA1-4317-B34B-AFC99A50B60F}'),
  ],
})
export class SectionB { }

You use the SciAuthService module that SPEAK 3 provides to retrieve access permissions for the access items.

The SciAuthService service has two methods: hasRead and hasWrite. They both require an itemName as an argument, and then return an Observable. itemName must be the name of an access item.

You can use the service directly from the template in combination with the async pipe. For example:

import { SciAuthService } from '@speak/ng-sc/auth';
@Component({
  selector: 'auth-service-example',
  template: `
    <div *ngIf="authService.hasRead('OptionalContent') | async">Optional content</div>
    <button [disabled]="!(authService.hasWrite('Button1') | async)">Disableable btn</button>
  `
})
export class ExampleComponent {
  constructor(public authService: SciAuthService) { }
}

Alternatively, you can subscribe to the observables and then use regular variables. This requires extra code, but then your code may be easier to understand. For example:

@Component({
  selector: 'auth-service-example',
  template: `
    <div *ngIf="hasRead">Optional content</div>
    <button [disabled]="hasWrite">Disableable btn</button>
  `
})
export class ExampleComponent {
  hasRead: boolean;
  hasWrite: boolean;
  constructor(private authService: SciAuthService) { }
  ngOnInit() {
    this.authService.hasRead('OptionalContent').subscribe(value => this.hasRead = value);
    this.authService.hasWrite('Button1').subscribe(value => this.hasWrite = value);
  }
}