React-rbac-lib NPM

react-rbac-lib

A tiny useful library to integrate role based access control for react (Typescript)

Installation

To use in your projects:

npm install react-rbac-lib --save

Usage

import RBAC from "react-rbac-lib";
import _ from "lodash";

let userData: any;
try {
    const localStorageUserData: any = localStorage.getItem("user");
    userData = JSON.parse(localStorageUserData || "{}");
} catch (error)
const abilities = RBAC.hasAccessFor("member", _.get(userData, "data.role", {})

//eg.Method for user access check
const checkUsrAccess = () => {
    return (
        abilities.can('create', 'userRoleManagement.userAccessPermissions.roleAccess_1')       ||   //returns true
        abilities.can('view', 'userRoleManagement.userAccessPermissions.roleAccess_1')         ||   //returns false
        abilities.can('update', 'userRoleManagement.userAccessPermissions.roleAccess_1')       ||   //returns true
        abilities.can('delete', 'userRoleManagement.userAccessPermissions.roleAccess_1')       ||   //returns false   
        abilities.can('create', 'userRoleManagement.userAccessPermissions.roleAccess_2')       ||   //returns false   
        abilities.can('edit', 'userRoleManagement.userAccessPermissions.roleAccess_2')              //returns false  
    );
};
return (
    checkUsrAccess() && (<ComponentsAccordingToTheUserAccess/>)
);

Sample json data

{
    "data": {
        ".....": {
            .....
            .....
        },
        "role": {
            "isSuperAdminPermission": false,  // [true  - overrides role checks to true.] 
                                              // [false - checks individual role permissions]

            "userRoleManagement": {
                "userAccessPermissions": {
                    "roleAccess_1": {
                        "create": true,
                        "view": false,
                        "update": true,
                        "delete": false,
                    },
                    "roleAccess_2": {
                        "create": false,
                        "edit": false,
                        ......
                        ......
                    }
                },
               ........
               ........
            },
            ...........
            ...........
        }
    },
}