Permissions in Angular

The OneCX permission management is responsible for managing permissions in OneCX. Permissions are used to control access to certain features or actions within an application based on the user’s roles and permissions.
In Angular applications, the User Service from the Angular Integration Interface can be used to check for permissions and implement conditional rendering or access control based on the user’s permissions.

This guide provides an overview of how to work with permissions in Angular applications within the OneCX ecosystem, including how to check for permissions and retrieve the list of permissions for the current user.

Permission Basics

In OneCX, there are 3 key concepts: permission, role and user. Each application can define many permissions that allow or deny an action on a specific resource (e.g. USER#DELETE) and then can validate if the permissions is met. Every user registered has set of roles assigned to them (e.g. admin) where each role is assigned with different permissions. With combination of those 3 concepts, application can be displayed differently based on the current user permissions.

Permission Setup

To set up permissions for the application, OneCX core applications should be used to add or modify existing permissions and assignments for roles.

Permission Validation

To perform permission validation in Angular applications, User Service should be used. Depending on the requirements different methods and properties should be used

Check For Permission in Angular

To check if the currently logged in user has specific permission(s), use the hasPermission method of User Service.

example.ts

const userService = inject(UserService)
// Check for single permission
userService.hasPermission('USER#DELETE')

// Check for multiple permissions
userService.hasPermission(['USER#EDIT', 'USER#EXPORT'])

Get All Application Permissions

To get a list of all permissions for the current user in the context of the application, use the getPermissions method of User Service.

example.ts

const userService = inject(UserService)
// Get all application permissions
userService.getPermissions().pipe((
    // Pipe the permission list
))