vanilla-rbac

A framework agnostic type-safe role-base access control library.

Getting Started

Vanilla RBAC is a < 1kb type-safe library that provides role-based access control to any frontend framework. It comprises of a setupRBAC function and a webcomponent named rback-comp.

Installation

• npm: npm i vanilla-rbac
• cdn: https://cdn.jsdelivr.net/gh/kiranmantha/vanilla-rbac/dist/index.js
• importmap:

<script type="importmap">
  {
    "imports": {
      "vanilla-rbac": "https://cdn.jsdelivr.net/gh/kiranmantha/vanilla-rbac/dist/index.js"
    }
  }
</script>
<script type="module">
  import { setupRBAC } from 'vanilla-rbac';
</script>

Usage

• In your project entry file, import setupRBAC and use it as below:

import { setupRBAC } from 'vanilla-rbac';

/**
 * This setup function will register the user details, user role and all possible roles with associated permissions
 * This will also register a webcomponent named `rbac-comp` which is used to control user interactions based on permission and role
 * Call this function after the system fetched user details and all possible roles with permissions
 */
setupRBAC({
  /**
   * logged in user details. type object.
   */
  user: {},
  /**
   * role of loggedin user. type string
   */
  userRole: 'lead',
  /**
   * roles is an object with role as key and permissions as value
   * permissions can be a string or a list of strings or an object
   * any role with '*' as permission defines that provided role is entitled to do any operation
   */
  roles: {
    lead: '*',
    seniormember: ['add:post', 'edit:post', 'view:posts'],
    juniormember: {
      /**
       * others is a predefined key that segregates permissions that do not depend on any logic
       */
      others: ['add:post'],
      /**
       * if provided permission not found in others, then it will be treated as key of object and execute it
       * @param {object} user is the loggedin user details
       * @param {DOMStringMap} data is the HTML Dataset which is the list of data-* that passed to rbac-comp
       */
      'edit:post': (user, data) => {
        /**
         * remember: data is the HTMLDataset that gives all the data-* attributes passed to the `rbac-comp`
         * more details: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
         */
        return user.id === data.postOwnerId;
      }
    }
  }
});

• consume rbac-comp by passing data-perform. rbac-comp accepts 2 slots. allowed and notallowed.

Example 1: controlling specific operations

<rbac-comp data-perform="edit:post" data-post-owner-id="123">
  <button slot="allowed" onclick='alert("i can edit")'>Edit</button>
  <span slot="notallowed">access denied</span>
</rbac-comp>

Example 2: controlling specific pages

<!-- page: localhost/posts -->
<rbac-comp data-perform="view:posts">
  <div slot="allowed">
    <!-- display all posts within the page -->
    <ul>
      <li>Post 1</li>
      <li>Post 2</li>
    </ul>
    <!-- or -->
    <your-posts-component></your-posts-component>
  </div>
  <div slot="notallowed">
    <access-denied-component></access-denied-component>
  </div>
</rbac-comp>

Live Examples:

• Angular
• React
• Vue