primeros cambios para manejar los permisos y grupos

Front/src/lib/NavBarAutocompletable.svelte

@@ -1,44 +1,59 @@
 <script lang="ts">
-    import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
-    import { onMount } from "svelte";
-    import { navigate } from "svelte-routing";
-    let isOpen = false;
-  
-  function handleUpdate(event: any) {
-    isOpen = event.detail.isOpen;
-  }  
+  import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
+  import { onMount } from "svelte";
+  import { writable } from 'svelte/store';
 
-  let permisos = $state()
+  let isOpen: boolean = $state(false);
 
+  interface Permiso {
+    id: number;
+    descripcion: string;
+  }
+
+  const permisos = writable<Permiso[]>([]);
+  const email = localStorage.getItem('email');
+  const token = sessionStorage.getItem('token');
+
+ 
   async function obtenerPermisos(){
     try {
       const response = await fetch("http://localhost:5007/api/acciones",{
         method: 'POST',
         headers: {
+          'Auth' : String(token),
           'Content-Type' : "application/json"
         },
-        credentials: 'include'
+        body: JSON.stringify({email})
       });
       if (response.ok){
-        permisos = response.json();
+        const json  = await response.json();
+        
+        permisos.set(json);
       }
     } catch (e) {
       console.error(e);
-      navigate("/");
+ 
     }
   }
-
-  onMount(async () => {
-
+  
+  $inspect(permisos);
+  onMount( () => {
+     obtenerPermisos();
   })
 </script>
 
 <Navbar container="xxl" expand="md" color="dark-subtle">
-  <NavbarBrand href="/Menu">AlquilaFacil</NavbarBrand>
+  <NavbarBrand href="/">
+    AlquilaFacil
+  </NavbarBrand>
   <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-  <Collapse isOpen={isOpen} navbar expand="md" on:update={handleUpdate}>
+  <Collapse isOpen={isOpen} navbar expand="md">
     <Nav class="ms-auto" navbar>
-    
+    {#each $permisos as item }
+      <NavItem>
+        <NavLink href="/accion/{item.id}">{item.descripcion}</NavLink>
+      </NavItem>
+    {/each}
     </Nav>
   </Collapse>
 </Navbar>

Front/src/lib/NavBarLogin.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
     import { Navbar, NavbarBrand, NavbarToggler, NavItem, Nav, NavLink, Collapse } from "@sveltestrap/sveltestrap";
-    let isOpen = $state(false);
-    function handleUpdate(event) {
-      isOpen = event.detail.isOpen;
-    }
+    
+    let isOpen:boolean = false;
+ 
 </script>
 
 
@@ -12,7 +11,7 @@
     AlquilaFacil
   </NavbarBrand>
   <NavbarToggler on:click={() => (isOpen = !isOpen)} />
-  <Collapse isOpen={isOpen} navbar expand="md" on:update={handleUpdate}>
+  <Collapse isOpen={isOpen} navbar expand="md">
     <Nav class="ms-auto" navbar>
       <NavItem>
         <NavLink href="/">Login</NavLink>

Front/src/lib/RutaProtegida.svelte

@@ -1,51 +1,53 @@
 <script>
-  import { onMount } from 'svelte';
-  import { navigate } from 'svelte-routing'; // Asumiendo que estás usando svelte-routing
-  import { writable } from 'svelte/store';
-
-  let isAuthenticated = writable(false);
-  let isVerified = writable(false);
-
- 
-  let { component } = $props();
-
-  let redirect = window.location.pathname;
-
-  const email = localStorage.getItem('email');
-
-  const handleAccess = async () => {
+    import { onMount } from 'svelte';
+    import { navigate } from 'svelte-routing'; 
+    import { writable } from 'svelte/store';
+  
+    export let component;  
+  
+    const isAuthenticated = writable(false); 
+    const isVerified = writable(false); 
+  
+    const redirect = window.location.pathname;
+    const email = localStorage.getItem('email');
+    const token = sessionStorage.getItem('token');
+  
+    const handleAccess = async () => {
       try {
-          const response = await fetch('http://127.0.0.1:5007/api/login/validar', {
-              method: 'POST',
-              headers: {
-                  'Content-Type': 'application/json',
-              },
-              body: JSON.stringify( {email, redirect} ),
-              credentials: "include"
-          });
-
-          if (response.ok) {
-              isAuthenticated.set(true);
-          }
+        const response = await fetch('http://127.0.0.1:5007/api/login/validar', {
+          method: 'POST',
+          headers: {
+            'Auth': String(token),
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({ email, redirect }),
+          credentials: "include"
+        });
+  
+        if (response.ok) {
+          isAuthenticated.set(true); // Actualiza el store
+        }
+      } catch (error) {
+        console.error('Error durante la autenticación:', error);
       } finally {
-          isVerified.set(true);
+        isVerified.set(true); // Marca la verificación como completada
       }
-  };
-
-  onMount(async () => {
-      await handleAccess();
-  });
-</script>
-
-{#if !$isVerified}
+    };
+  
+    onMount(() => {
+      handleAccess();
+    });
+  </script>
+  
+  {#if !$isVerified}
     <div class="spinner-border position-absolute top-50 start-50 translate-middle" role="status">
-        <span class="visually-hidden">Cargando</span>
+      <span class="visually-hidden">Cargando</span>
     </div>
-{:else}
+  {:else}
     {#if $isAuthenticated}
-        {@const SvelteComponent = component}
-        <SvelteComponent/>
+      <svelte:component this={component} />
     {:else}
-        {navigate('/')}
+      {navigate('/')}  
     {/if}
-{/if}
+  {/if}
+  

Front/src/lib/login.svelte

@@ -32,6 +32,7 @@
       const ret = await response.json();
       localStorage.clear();
       localStorage.setItem('email', ret.email);
+      sessionStorage.setItem('token', ret.token);
       //setTimeout(() => console.log("50ms") ,50);
       navigate(ret.redirect);
     } catch (e) {