SESP/sgse-app
2
0
Fork 0
Code Issues 3 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: integrate ProtectedRoute component across dashboard pages

Browse Source 
- Added the ProtectedRoute component to various dashboard pages to enforce authentication and role-based access control.
- Updated allowedRoles and maxLevel parameters for specific routes to align with the new permission management structure.
- Enhanced user experience by ensuring consistent access checks across the application.
This commit is contained in:
killer-cf
2025-11-14 16:15:21 -03:00
parent 3c371bc35c
commit b503045b41
15 changed files with 95 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/web/src/lib/components/ProtectedRoute.svelte
View File

@@ -1,16 +1,15 @@
<script lang="ts">
import { useQuery } from "convex-svelte";
import { api } from "@sgse-app/backend/convex/_generated/api";
import { onMount } from "svelte";
import { page } from "$app/stores";
import type { Snippet } from "svelte";
import { useQuery } from 'convex-svelte';
import { api } from '@sgse-app/backend/convex/_generated/api';
import { onMount } from 'svelte';
import type { Snippet } from 'svelte';
let {
children,
requireAuth = true,
allowedRoles = [],
maxLevel = 3,
redirectTo = "/",
redirectTo = '/'
}: {
children: Snippet;
requireAuth?: boolean;
@@ -41,9 +40,7 @@
// Verificar roles
if (allowedRoles.length > 0 && currentUser?.data) {
const hasRole = allowedRoles.includes(
currentUser.data.role?.nome ?? "",
);
const hasRole = allowedRoles.includes(currentUser.data.role?.nome ?? '');
if (!hasRole) {
const currentPath = window.location.pathname;
window.location.href = `${redirectTo}?error=access_denied&route=${encodeURIComponent(currentPath)}`;
@@ -69,10 +66,10 @@
</script>
{#if isChecking}
<div class="flex justify-center items-center min-h-screen">
<div class="flex min-h-screen items-center justify-center">
<div class="text-center">
<span class="loading loading-spinner loading-lg text-primary"></span>
<p class="mt-4 text-base-content/70">Verificando permissões...</p>
<p class="text-base-content/70 mt-4">Verificando permissões...</p>
</div>
</div>
{:else if hasAccess}

3
apps/web/src/routes/(dashboard)/+page.svelte
View File

@@ -7,6 +7,7 @@
import { resolve } from "$app/paths";
import { UserPlus, Mail } from "lucide-svelte";
import { useAuth } from "@mmailaender/convex-better-auth-svelte/svelte";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
let { data } = $props();
@@ -128,6 +129,7 @@
}
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<!-- Alerta de Acesso Negado / Autenticação -->
{#if showAlert}
@@ -823,6 +825,7 @@
</div>
{/if}
</main>
</ProtectedRoute>
<style>
@keyframes fadeIn {

3
apps/web/src/routes/(dashboard)/compras/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { ShoppingCart, ShoppingBag, Plus } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<div class="text-sm breadcrumbs mb-4">
<ul>
@@ -41,4 +43,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/comunicacao/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { Megaphone, Edit, Plus } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<div class="text-sm breadcrumbs mb-4">
<ul>
@@ -41,4 +43,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/controladoria/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { BarChart3, ClipboardCheck, Plus, CheckCircle2, Clock, TrendingUp } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<!-- Breadcrumb -->
<div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/financeiro/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { DollarSign, Building2, Plus, Calculator, TrendingUp, FileText } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<!-- Breadcrumb -->
<div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/juridico/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { Scale, BookOpen, Plus } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<div class="text-sm breadcrumbs mb-4">
<ul>
@@ -41,4 +43,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/licitacoes/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { FileText, ClipboardCopy, Plus, Users, FileDoc } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<!-- Breadcrumb -->
<div class="text-sm breadcrumbs mb-4">
@@ -86,4 +88,5 @@
</div>
</div>
</main>
</ProtectedRoute>

3
apps/web/src/routes/(dashboard)/perfil/+page.svelte
View File

@@ -7,6 +7,7 @@
import AprovarAusencias from '$lib/components/AprovarAusencias.svelte';
import CalendarioAusencias from '$lib/components/ausencias/CalendarioAusencias.svelte';
import { generateAvatarGallery } from '$lib/utils/avatars';
import ProtectedRoute from '$lib/components/ProtectedRoute.svelte';
import type { Id } from '@sgse-app/backend/convex/_generated/dataModel';
import { X, Calendar } from 'lucide-svelte';
import type { FunctionReturnType } from 'convex/server';
@@ -365,6 +366,7 @@
}
</script>
<ProtectedRoute>
<main class="min-h-screen pb-12">
<!-- BANNER HERO PREMIUM -->
<div class="relative mb-8 overflow-hidden">
@@ -2264,6 +2266,7 @@
</dialog>
{/if}
</main>
</ProtectedRoute>
<!-- Modal Wizard Solicitação de Férias -->
{#if mostrarWizard && funcionarioIdDisponivel}

3
apps/web/src/routes/(dashboard)/programas-esportivos/+page.svelte
View File

@@ -1,8 +1,10 @@
<script lang="ts">
import { Trophy, Award, Plus } from "lucide-svelte";
import { resolve } from "$app/paths";
import ProtectedRoute from "$lib/components/ProtectedRoute.svelte";
</script>
<ProtectedRoute>
<main class="container mx-auto px-4 py-4">
<div class="text-sm breadcrumbs mb-4">
<ul>
@@ -41,4 +43,5 @@
</div>
</div>
</main>
</ProtectedRoute>

2
apps/web/src/routes/(dashboard)/ti/perfis/+page.svelte
View File

@@ -138,7 +138,7 @@
);
</script>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
<div class="container mx-auto max-w-7xl px-4 py-6">
<!-- Header -->
<div class="mb-8 flex items-center justify-between">

2
apps/web/src/routes/(dashboard)/ti/personalizar-permissoes/+page.svelte
View File

@@ -4,7 +4,7 @@
import { resolve } from '$app/paths';
</script>
<ProtectedRoute allowedRoles={['admin', 'ti']} maxLevel={1}>
<ProtectedRoute allowedRoles={['ti_master', 'admin']} maxLevel={1}>
<!-- Breadcrumb -->
<div class="breadcrumbs mb-4 text-sm">
<ul>

2
apps/web/src/routes/(dashboard)/ti/solicitacoes-acesso/+page.svelte
View File

@@ -257,7 +257,7 @@
}
</script>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
<div class="container mx-auto max-w-7xl px-4 py-6">
<!-- Mensagem de Feedback -->
{#if mensagem}

2
apps/web/src/routes/(dashboard)/ti/times/+page.svelte
View File

@@ -278,7 +278,7 @@
}
</script>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={2}>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
<main class="container mx-auto max-w-7xl px-4 py-6">
<!-- Breadcrumb -->
<div class="breadcrumbs mb-4 text-sm">

2
apps/web/src/routes/(dashboard)/ti/usuarios/+page.svelte
View File

@@ -535,7 +535,7 @@
}
</script>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={3}>
<ProtectedRoute allowedRoles={['ti_master', 'admin', 'ti_usuario']} maxLevel={1}>
<div class="container mx-auto max-w-7xl px-4 py-6">
<!-- Header -->
<div class="mb-6 flex items-center justify-between">