Squad Front

Appearance

Roteamento e Segurança (RBAC) ​

Em um ecossistema médico, o roteamento vai além da simples navegação; ele é a primeira camada de proteção contra acessos indevidos a dados sensíveis de pacientes. Nossa estratégia utiliza React Router combinada com Role-Based Access Control (RBAC) e Lazy Loading.

Proteção por Nível de Acesso (Roles) ​

Implementamos um wrapper de segurança chamado RequireRoleLayout. Este componente não apenas verifica se o usuário está autenticado, mas também se o seu perfil (Médico, Paciente ou Admin) possui permissão para acessar aquela funcionalidade específica.

Por que isso é importante? ​

Um paciente nunca deve conseguir "adivinhar" uma URL de prontuário e acessá-la. O RequireRoleLayout atua como um firewall de interface, redirecionando o usuário ou exibindo uma tela de "Acesso Negado" caso ele tente ultrapassar os limites de seu papel.

Exemplo de Configuração de Rotas Protegidas ​

tsx
<Routes>
  {/* Layout Geral para Usuários Autenticados */}
  <Route element={<MainLayout />}>
    
    {/* Contexto do Médico: Acesso a Prontuários e Agenda */}
    <Route element={<RequireRoleLayout role="DOCTOR" />}>
      <Route path="/medical/consultations" element={<ConsultationPage />} />
      <Route path="/medical/records/:patientId" element={<MedicalRecordPage />} />
    </Route>

    {/* Contexto do Paciente: Seus Agendamentos e Exames */}
    <Route element={<RequireRoleLayout role="PATIENT" />}>
      <Route path="/patient/my-appointments" element={<MyAppointmentsPage />} />
      <Route path="/patient/results" element={<ExamResultsPage />} />
    </Route>

  </Route>
</Routes>

Diferentes módulos podem exigir diferentes layouts. Um médico em teleconsulta precisa de uma interface focada no vídeo e no prontuário, enquanto um administrador precisa de painéis de dados.

  • MainLayout: Sidebar padrão com navegação lateral.
  • ConsultationLayout: Layout focado, sem distrações, otimizado para a visualização da chamada de vídeo.
  • AuthLayout: Centralizado e simples, para fluxos de Login e Recuperação de Senha.

Desempenho: Lazy Loading e Injeção ​

Combinamos o roteamento do React com React.lazy. Isso garante que o bundle JavaScript do módulo de Prontuário (que pode ser pesado devido a editores de texto e visualizadores de imagem DICOM) só seja baixado se o médico realmente acessar essa página.

tsx
/**
 * Carregamento preguiçoso do módulo de Prontuário.
 * O navegador só buscará este arquivo quando a rota for ativada.
 */
const MedicalRecordPage = lazy(() => import('modules/medical-record/ui/Page'));

// No roteador
<Route 
  path="/medical/records/:id" 
  element={
    <Suspense fallback={<LoadingSkeleton />}>
      <MedicalRecordPage />
    </Suspense>
  } 
/>

Esta abordagem, somada à Injeção Dinâmica de Redux/Saga, garante que a aplicação permaneça leve e rápida, independentemente de quantos domínios de negócio existam no monorepo.