Skip to content

nurzhan-saktaganov/react-rbac-guard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React RBAC Guard

react-rbac-guard is a module allowing to manage visibility of particular components depending on user credentials (or current permissions set). Module uses approach that was inspired by "react-redux-connect" module.

The package currently in the early development stage.

Dependensies

React RBAC requires either React new context API or React legacy context API support. Module tries to use new context API (React version >= 16.3) if available. Otherwise fallbacks to legacy context API. Legacy context API has problem with returning false from shouldComponentUpdate in intermediate components (see docs).

Installation

$> npm install react-rbac-guard

Integration in 5 easy steps

  1. Define your own class derived from Requirement class. It must implement isSatisfied method that takes credentials as parameter. The method must return true if requirement is satisfied by credentials and false otherwise
import { Requirement } from "react-rbac-guard";

class Need extends Requirement {
  constructor(permission) {
    super();
    this.permission = permission;
  }

  isSatisfied(credentials) {
    // assume credentials is an object
    return credentials[this.permission] ? true : false;
  }
}
  1. Create requirements
const NeedManagePost = new Need("CanManagePost");
const NeedManageComment = new Need("CanManageComment");
const NeedManageUser = new Need("CanManageUser");
  1. Create guards
import { guardFactory } from "react-rbac-guard";

const PostManager = guardFactory(NeedManagePost);
const CommentManager = guardFactory(NeedManageComment);
const UserManager = guardFactory(NeedManageUser);
  1. Provide credentials via CredentialProvider and use guards as components
import { CredentialProvider } from "react-rbac-guard";

class App extends Component {
  render() {
    const credentials = {}; // you have to provide it

    return (
      <CredentialProvider value={credentials}>

        <PostManager>
          <button>Edit Post</button>
          <button>Delete Post</button>
        </PostManager>

        <CommentManager>
          <button>Edit Comment</button>
          <button>Delete Comment</button>
        </CommentManager>

        <UserManager>
          <button>Block User</button>
        </UserManager>

      </CredentialProvider>
    );
  }
}
  1. Enjoy!

Capabilities

  1. You can use all, any, not functions to combine requirements.
// Let's assume we have NeedAdmin, NeedManager, NeedUser, NeedGuest requirements.
// You can produce new ones by combining them.
import { any, not } from "react-rbac-gurad";

const NeedAuthorized = not(NeedGuest);
const NeedExtendedRights = any(NeedAdmin, NeedManager);

In other words, you can define arbitrary predicate (in terms of mathematical logic) based on your requirements.

  1. You can use Guard component directly (without guardFactory).
  <Guard requirement={NeedAdmin}>
    <button>Restart Server</button>
  </Guard>
  1. You can use protect to protect your components (it behaves like connect from react-redux-connect ).
import { protect } from "react-rbac-guard";

class CustomersList extends Component {
  ...
}

// exports decorated component (like connect in "react-redux-connect")
export default protect(NeedExtendedRights)(CustomersList);

or to protect external components

import { Button } from "react-bootstrap";
import { protect } from "react-rbac-guard";

const SignUpButton = protect(NeedGuest)(Button);
const SignOutButton = protect(NeedAuthrized)(Button);
  1. It's also possible to make a decision inside credentials object
class Credentials {
  satisfies(requirement) {
    return ...// return boolean depending on requirement
  }
}

class MyRequirement extends Requirement {
  ...
  isSatisfied(credentials) {
    return credentials.satisfies(this);
  }
}

const credentials = new Credentials(...);

<CredentialProvider value={credentials}>
  ...
</CredentialProvider>

Demo

To see demos please visit https://codesandbox.io/s/znmxlw59jm.

License

MIT

About

Making access control to React components easier.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published