Permission Frontend

The frontend module provides reusable permission-checking primitives for the admin app.

Source root:

apps/admin/src/core/Permission/

Directory Structure

Permission/
  config/        Static module config and messages.
  entities/      Permission types.
  hooks/         Current-user permission hook.
  lib/           Pure permission check function.
  view/gates/    React gate components.

Types

Permission types live in:

entities/permission.ts

Key concepts:

type PermissionCheckMode = "all" | "any";
type RequiredPermissions = string | string[];

Hook

Current-user permission access:

hooks/usePermissions.ts

The hook reads auth state from AuthProvider and returns:

permissions;
isAdmin;
loading;

isAdmin is based on the configured super admin id.

Pure Permission Check

Permission check logic:

lib/hasPermission.ts

Behavior:

Super admin passes all checks.
all mode requires every permission.
any mode requires at least one permission.
Empty required permissions should be treated carefully at call sites.

Gates

`PermissionGate`

Use for conditional UI controls such as buttons and menu items.

<PermissionGate requiredPermissions="admins.update">
  <Button>Edit</Button>
</PermissionGate>

`PermissionPageGate`

Use for route-level access protection.

<PermissionPageGate requiredPermissions={["admins.view", "role.view"]}>
  <AdminListPage />
</PermissionPageGate>

If access is denied, it renders the provided fallback or a 403 page.

Translations

The module has a local message bundle for consistency:

config/messages.ts
config/translation/en.json
config/translation/uk.json

1.7 KiB Raw Blame History