Menus de painel costumam vir do servidor: cada papel enxerga entradas diferentes e adicionar páginas não exige publicar o frontend de novo. O trabalho não é desenhar o que chega, mas submeter menu, rotas e ações ao mesmo conjunto de regras.

O contrato do menu

O menu chega como grupos e itens. Cada item traz caminho, rótulo ou chave de rótulo, ícone, grupo, ordem, marca de oculto, códigos de permissão e filhos. Os grupos definem a ordem da barra lateral, e a hierarquia para em quatro níveis para que uma carga anômala não estoure a navegação.

Itens externos declaram endereço e forma de abertura: nova janela, mesma janela ou incorporado. Incorporar só funciona em sites que permitem — um site que envia X-Frame-Options: DENY aparece em branco.

A tolerância também é do frontend: caminhos estranhos, ícones desconhecidos e filhos profundos demais são normalizados e deixam uma lista de avisos legível. Ao conectar uma API real, leia essa lista em vez de esperar o relato de um usuário.

As rotas só conhecem páginas registradas

As rotas dinâmicas buscam seus componentes em um registro local: a API pode referenciar uma página registrada, mas não introduzir código novo. Sessão ou permissão ausente termina na tela de login ou em um 403, nunca em uma página vazia.

Três camadas, um conjunto de regras

  • Menu: os itens são filtrados por código de permissão, então entradas indisponíveis não são renderizadas.
  • Rotas: digitar a URL diretamente aciona a mesma proteção e resulta em 403.
  • Ações: <Can permission="customer:create"> cobre operações como criar e exportar, mostrando estado desabilitado em vez de falhar em silêncio.

Os códigos de permissão aceitam * para tudo, module:* para um módulo inteiro e correspondências exatas, de modo que as diferenças de papel cabem em uma lista. A documentação traz o contrato completo e a demonstração permite comparar duas contas: no mesmo endereço o administrador vê o log de auditoria e a conta de teste recebe 403.