In modern web applications, controlling access to data based on user roles is essential for maintaining security and ensuring that users only see what they're allowed to. One common challenge is determining what fields or attributes a user can access based on their role. This article will guide you through a practical approach to dynamically filtering object attributes based on user roles, using TypeScript.

We’ll start by defining user abilities based on roles and then introduce a utility function, omitFieldsBasedOnAbility, which filters out attributes from an object that the user is not allowed to access.

Defining User Abilities Based on Role

The first step in implementing role-based filtering is defining what each role is allowed to do. This is commonly managed by an ability definition system, like CASL, which lets you specify what actions can be performed on which resources or attributes.

Below, we define user abilities dynamically based on their role:

// Dummy implementation
function getUserRole(): string {
  return 'editor';
}

const ability = defineAbility((can, cannot) => {
  const role = getUserRole();

  if (role === 'admin') {
    can('read', 'Post');
    can('update', 'Post'); 
  } else if (role === 'editor') {
    can('read', 'Post', ['title', 'content']); 
    cannot('read', 'Post', ['views', 'author']); 
  } else if (role === 'viewer') {
    can('read', 'Post', ['title']); 
    cannot('read', 'Post', ['content', 'views', 'author']); 
  } else {
    // No access for unauthorized users
    cannot('read', 'Post'); 
  }
});

Explanation of Role-Based Abilities

• Admin: The admin role has full access to all fields and can perform read and update actions on the Post entity.
• Editor: The editor role can only read specific fields (title and content), but not sensitive fields like views or author.
• Viewer: The viewer role has the most restricted access, allowing them to only read the title field.

The function getUserRole is a placeholder that would dynamically return the role of the logged-in user, possibly from an API or authentication session.

The omitFieldsBasedOnAbility Function

Now that we have the ability system in place, the next step is to filter out attributes from an object based on the user's permissions. The function omitFieldsBasedOnAbility does exactly that.

export function omitFieldsBasedOnAbility<T extends object>(
  ability: AppAbility,
  action: Actions,
  subject: Subjects,
  item: T
): Partial<T> {
  const result = {};
  for (const attribute of Object.keys(item)) {
    if (ability.can(action, subject, attribute)) {
      result[attribute] = item[attribute];
    }
  }
  return result;
}

How the Function Works

1. Parameters:

   • ability: AppAbility: The user's ability object, which defines what actions they can perform on specific resources and fields.
   • action: Actions: The action the user is trying to perform (e.g., read, update).
   • subject: Subjects: The resource (or entity) the action is being performed on, such as a Post.
   • item: T: The actual object containing data that needs to be filtered.

2. Iterating Over Object Keys: The function loops through each attribute in the object.

3. Checking Permissions: For each attribute, it checks if the user has permission to perform the specified action on that attribute using ability.can(action, subject, attribute).

4. Returning Filtered Object: Only the attributes the user is allowed to access are added to the result, and the function returns a partial version of the object containing only the permitted fields.

Example: Filtering a Post Object Based on Role

Let's say we have the following Post object:

type Post = {
  id: string;
  title: string;
  content: string;
  author: string;
  views: number;
};

const post: Post = {
  id: '123',
  title: 'Role-Based Access Control in Web Applications',
  content: 'This is a detailed guide on role-based access control...',
  author: 'John Doe',
  views: 1200,
};

For an editor, the omitFieldsBasedOnAbility function would filter the object as follows:

const filteredPost = omitFieldsBasedOnAbility(ability, 'read', 'Post', post);
console.log(filteredPost);

Given the editor's role, the resulting filtered object would be:

{
  "title": "Role-Based Access Control in Web Applications",
  "content": "This is a detailed guide on role-based access control..."
}

Explanation:

• The editor has permission to read the title and content fields, so these are included in the result.
• The author and views fields are omitted because the editor doesn't have permission to view them.

Benefits of Using omitFieldsBasedOnAbility

• Security: Sensitive data is hidden from users who lack the proper permissions, ensuring only authorized users can access certain fields.
• Flexibility: By integrating with an ability system like CASL, you can easily manage permissions across multiple roles and resources.
• Reusability: This function can be reused across various entities (like Post, User, etc.) where role-based filtering is needed.

Conclusion

Filtering object attributes based on user roles is an effective way to ensure secure access to data in web applications. The combination of dynamic role-based abilities and the omitFieldsBasedOnAbility function provides a powerful mechanism to selectively expose data fields based on what a user is allowed to see.

By using these techniques, you can confidently manage role-based access control (RBAC) in your TypeScript application, ensuring that users only access the data they are authorized for.