A framework agnostic type-safe role-base access control library.
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
.
- 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>
- 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 passingdata-perform
.rbac-comp
accepts 2 slots. allowed and notallowed.
<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>
<!-- 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>