React Permission

A Permission component for React.

Installation

npm install @synzhang/react-permission

Quick Start

export const ROLES = ["ADMIN", "USER"];
export const POLICIES = {
  "item:delete": (item, user) => {
    if (user.role === "ADMIN") {
      return true;
    }

    if (user.role === "USER" && item.userId === user.id) {
      return true;
    }

    return false;
  },
};

<PermissionProvider currentUser={currentUser} roles={ROLES} policies={POLICIES}>
  <App />
</PermissionProvider>

Role based access control

<Permission allowedRoles={["ADMIN"]}>{"Sensitive Content"}</Permission>

Permission based access control

import POLICIES from "policies";

<Permission policyCheck={POLICIES["item:delete"](item, user)}>
  {"Sensitive Operation"}
</Permission>;

API

PermissionProvider

| Property | Type | Default | Description | | ----------- | ------ | ------- | ------------------- | | currentUser | object | null | Current user object | | roles | array | [] | Roles | | policies | object | {} | Policies |

Permission

| Property | Type | Default | Description | | ----------------- | --------------- | ------- | ---------------------------- | | policyCheck | function | null | Policy check function | | allowedRoles | array | [] | Allowed roles | | forbiddenFallback | React.Component | null | Forbidden fallback component | | children | React.Component | null | Children component |

License

MIT