Access Control Library

Enterprise-grade access control system with role-based permissions, group inheritance, and extensible validation

Configuration

Select Role

Select Group

Current Role:

Current Group:

Group Hierarchy

Admin Group Full permissions

Content Group Inherits from Admin Group

Live Demo

Component Access Control

Admin Panel Component

Status: Access denied

Content Editor Component

Status: Access denied

Permission Breakdown

Base Role Permissions:

Group Inheritance:

Admin Panel Effective Permissions: ,

Demo Code Examples

Create Roles and Groups

import { createRole, createGroup } from 'permit-core';

const adminRole = createRole('admin');
const editorRole = createRole('editor');
const viewerRole = createRole('viewer');

const roles = [adminRole, editorRole, viewerRole];

const adminGroup = createGroup('admin');
const contentGroup = createGroup('content', adminGroup);

const groups = [adminGroup, contentGroup];

Define Component Permissions (Roles & Groups)

import { createComponentPermission } from 'permit-core';

const groupPermissions = {
  [adminGroup.getCode()]: {
    component: createComponentPermission(adminGroup, [{
      identifier: /.*/,
      actions: ['view', 'edit']
    }])
  },
  [contentGroup.getCode()]: {
    component: createComponentPermission(contentGroup, [{
      identifier: 'admin-panel',
      actions: ['edit'],
      exclude: true
    }, {
      identifier: 'content-panel',
      actions: ['view', 'edit']
    }])
  }
};

const rolePermissions = {
  [adminRole.getCode()]: {
    component: createComponentPermission(adminRole, [{
      identifier: /.*/,
      actions: ['view', 'edit']
    }])
  },
  [editorRole.getCode()]: {
    component: createComponentPermission(editorRole, [{
      identifier: 'admin-panel',
      actions: ['view']
    }, {
      identifier: 'content-panel',
      actions: ['view', 'edit']
    }])
  },
  [viewerRole.getCode()]: {
    component: createComponentPermission(viewerRole, [{
      identifier: 'content-panel',
      actions: ['view']
    }])
  }
};

Using ComponentAccessControl in Svelte

<script lang="ts">
  import AccessControlProvider from '$lib/AccessControlProvider.svelte';
  import ComponentAccessControl from '$lib/ComponentAccessControl.svelte';
  import { user } from '$stores/user.store';

  // roles, groups, rolePermissions, groupPermissions defined above
</script>

<AccessControlProvider {roles} {groups} account={user}>
  <ComponentAccessControl identifier="admin-panel">
    {#snippet children({ isEditable })}
      <button class="btn" disabled={!isEditable}>Edit Settings</button>
    {/snippet}
    {#snippet fallback()}
      <p>Access denied</p>
    {/snippet}
  </ComponentAccessControl>
</AccessControlProvider>