Todos los componentes (244)

Puerta de permisos

Gestión · PermissionGate

Qué es y cuándo usarlo

Muestra, oculta o apaga un trozo de interfaz según lo que tenga concedido quien la usa: el botón de borrar solo para quien puede borrar, la pestaña de ajustes solo para administración.

Cuándo usarlo

Un botón, un menú o una sección que no todos los usuarios deben ver o poder usar.
PermissionProvider va una vez, arriba de la aplicación, con granted: una lista (['invoices.read', 'customers.*']) o una función con tu propia política. usePermission y usePermissions dan la misma respuesta en código, para un atajo o un menú.
permission es un permiso o una lista; con varios, match="all" (por defecto) pide todos y match="any" basta con uno. grupo.* concede todo lo que cuelga de grupo y *, todo.
mode="hide" (por defecto) no pinta nada, o pinta fallback. mode="disable" pinta el contenido apagado y dice por qué (reason).
Mientras los permisos cargan (loading en el proveedor), la puerta no decide: enseña loadingFallback, para no parpadear con un botón que luego desaparece.

Cuándo no

Como única protección: ocultar algo en pantalla no lo protege. Cada acción se comprueba también en el servidor.
Para que el usuario elija permisos: PermissionMatrix.

Teclado: no añade nada. Apagado, el contenido sale del tabulador porque el navegador desactiva cada control.

Accesibilidad: apagar es un <fieldset disabled> de verdad: el navegador desactiva por su cuenta cada botón, campo y casilla de dentro, y el motivo se lee como descripción del grupo. Con permiso no añade nada al DOM. Sin proveedor no concede nada y lo avisa en consola, para que olvidarlo se note.

Aspecto fino: sin variables propias; lo apagado baja su opacidad (amset-permission).

Cómo se ve

Necesitas el permiso para borrar pedidos.

No tienes acceso a las facturas.

// Dentro del proveedor de permisos de la aplicación
<>
  <PermissionGate permission="pedidos.borrar" mode="disable" reason="Necesitas el permiso para borrar pedidos.">
    <Button tone="error">Borrar pedido</Button>
  </PermissionGate>
  <PermissionGate permission="facturas.ver" fallback={<p>No tienes acceso a las facturas.</p>}>
    <Facturas />
  </PermissionGate>
</>

Props

Se importa con import { PermissionGate } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`children`obligatoria	`ReactNode`	—
`permission`obligatoria	`string \| readonly string[]`	El permiso que hace falta, o la lista de ellos. Sin ninguno, la puerta se abre.
`fallback`	`ReactNode`	Lo que se enseña en lugar del contenido cuando se oculta.
`loadingFallback`	`ReactNode`	Lo que se enseña mientras los permisos cargan. Por defecto, nada.
`match`	`PermissionMatch`	Con varios permisos: `all` (por defecto) pide todos y `any` basta con uno.
`mode`	`"hide" \| "disable"`	Que pasa sin permiso. `hide` (por defecto) no pinta nada, o pinta `fallback`. `disable` pinta el contenido pero apagado: todos los controles de dentro quedan desactivados y se lee por que.
`reason`	`string`	Con `disable`: por que esta apagado, que se lee con el contenido.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: