Sharing Top Content from the Angular-sphere.

Angular How-to: Implement Role-based security – Premier Developer

  • Laurie Atkinson, Premier Developer Consultant, shows us how to customize the behavior of an Angular app based on the user’s permissions.
  • { Injectable } – – { AuthGroup } – – { AuthorizationDataService } – – AuthorizationService { – – permissions: Array; // Store the actions for which this user has permission – – ( authorizationDataService: AuthorizationDataService) { } – – hasPermission(authGroup: AuthGroup) { – – ( .
  • permissions.find(permission => { – – permission === authGroup; – – })) { – – ; – – } – – ; – – } // This method is called once and a list of permissions is stored in the permissions property – – initializePermissions() { – – Promise((resolve, reject) =>…
  • Include the canActivate property of the route definition together with the data property in order to pass in the required permission.
  • For instance, a menu service could use the permission checking method to hide menu items if the user does not have the required permission.

Laurie Atkinson, Premier Developer Consultant, shows us how to customize the behavior of an Angular app based on the user’s permissions. This includes page navigation, hiding and disabling of UI elements, and generation of menus.

Applications often include requirements to customize their appearance and behavior based on the user’s role or permission. Users should only be presented with certain choices based on their role or a set of actions they have permission to perform. This is not a replacement for securing the data at the API level, but it improves the usability on the client. This post provides sample code that you can use to implement this feature in your Angular app.

Centralize the checking of permissions into an Angular service.

{ Injectable }

{ AuthGroup }

{ AuthorizationDataService }

AuthorizationService {

permissions: Array; // Store the actions for which this user has permission

( authorizationDataService: AuthorizationDataService) { }

hasPermission(authGroup: AuthGroup) {

( .permissions && .permissions.find(permission => {

permission === authGroup;

})) {

Angular How-to: Implement Role-based security – Premier Developer