Skip to main content

Authorization

Authorization in VEF is built on a simple convention: the application provides appContext.hasPermission(), and pages or components consume that capability.

Providing the Permission Function​

createApp().render({
  appContext: {
    hasPermission(token) {
      return currentPermTokenSet.has(token);
    }
  },
  ...
});

Direct Permission Checks​

useCheckPermission​

const checkPermission = useCheckPermission();

if (checkPermission("sys:user:create")) {
  // ...
}

useIsAuthorized​

const canEdit = useIsAuthorized(["sys:user:update", "sys:user:write"], "any");

Component-Level Permission Control​

import { PermissionGate } from "@vef-framework-react/components";

<PermissionGate permTokens="sys:user:create">
  <Button type="primary">Create User</Button>
</PermissionGate>

Filtering Config Items​

When menus, button configs, or action lists are declared first and filtered later, useAuthorizedItems() is often the best fit:

const actions = useAuthorizedItems([
  { key: "create", permTokens: "sys:user:create" },
  { key: "delete", permTokens: "sys:user:delete" }
]);

checkMode​

Permission checks support:

  • any: at least one token matches
  • all: all tokens must match

This is useful when permissions are combined.

  • let page code consume permissions instead of maintaining a second permission source
  • use PermissionGate for fine-grained button or section gating
  • use useAuthorizedItems() for configuration-array filtering