RBAC e Segurança no Frontend

PermissionGate

Oculta ou desabilita elementos baseado nas permissões do usuário autenticado.

import { PermissionGate } from "@oondemand/oon-core-front";

<PermissionGate permissions={["admin", "gestor"]}>
  <button>Excluir</button>
</PermissionGate>

Props

Prop	Tipo	Descrição
permissions	string[]	Roles que podem ver o conteúdo
fallback	ReactNode	Exibido quando sem permissão. Default: null

---

useOonAuth

Hook para acessar o usuário autenticado e funções de auth.

import { useOonAuth } from "@oondemand/oon-core-front";

function Header() {
  const { user, logout, isAuthenticated } = useOonAuth();

  if (!isAuthenticated) return null;

  return (
    <div>
      <span>Olá, {user.nome}</span>
      <button onClick={logout}>Sair</button>
    </div>
  );
}

Retorno

Campo	Tipo	Descrição
user	OonUser | null	Usuário autenticado
isAuthenticated	boolean	Se há sessão ativa
logout	() => void	Encerra a sessão

---

useOonApi

Hook para fazer chamadas REST com o SDK do Core.

import { useOonApi } from "@oondemand/oon-core-front";

function RelatorioPage() {
  const api = useOonApi();

  async function exportar() {
    const data = await api.get("/relatorios/resumo-mensal", { mes: "2025-01" });
    console.log(data);
  }

  return <button onClick={exportar}>Exportar</button>;
}

---

useOonResource

Hook para operações CRUD em uma model com cache automático (React Query).

import { useOonResource } from "@oondemand/oon-core-front";

function ClientesPage() {
  const { list, create, update, remove } = useOonResource("Cliente");

  const { data, isLoading } = list({ page: 1, search: "João" });

  return (
    <>
      {isLoading && <span>Carregando...</span>}
      {data?.results.map(c => <div key={c._id}>{c.nome}</div>)}
    </>
  );
}

---

Modos de autenticação

Modo	Descrição
"bearer"	Token JWT no Authorization: Bearer header (default)
"cookie"	Token em cookie HttpOnly
"external-sso"	Redirect para portal externo (Meus Apps)

Configure em start():

auth: {
  mode: "external-sso",
  loginUrl: "https://meusapps.oondemand.com.br/login",
  tokenParam: "code",
}