se utiliza backend para login y logout

.env-develop

@@ -0,0 +1 @@
+VITE_BACKEND="http://localhost:4000/api"

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+.env
 
 # Editor directories and files
 .vscode/*

docker/docker-compose.yml

@@ -12,5 +12,6 @@ services:
     command: >
       sh -c "
       [ -d node_modules ] || npm i ;
+      [ -f .env ] || cp .env.develop .env ;
       npm run dev
       "

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "dev": "vite --host --port=3000",
-    "build": "vite build",
+    "build": "VITE_BACKEND= vite build",
     "preview": "vite preview"
   },
   "devDependencies": {

src/layouts/Navbar.svelte

@@ -2,10 +2,15 @@
     import '../assets/navbar.css'
     import { Link } from 'svelte-navigator'
     import { storeCanasta } from '../stores/canasta';
+    import { runLogout } from '../services/auth';
 
-    function onSalir() {
+    async function onSalir() {
-        sessionStorage.removeItem('usuario');
+        try {
+            await runLogout()
             document.location.href = '/'
+        } catch (error) {
+            alert(error.detail || error)
+        }
     }
 </script>
 

src/main.js

@@ -1,13 +1,21 @@
 import App from './layouts/Base.svelte'
 import AppLogin from './pages/site/Login.svelte'
+import { storeUsuario } from './stores/usuario';
+import { getInfoToken } from './services/auth';
 
 let app;
-let usuario = JSON.parse(sessionStorage.getItem('usuario'))
 
-if (usuario) {
+async function begin() {
+  try {
+    const data = await getInfoToken()
+    storeUsuario.set(data)
     app = new App({ target: document.getElementById('app') })
-} else {
+  } catch (error) {
+    console.log(error.detail || error)
     app = new AppLogin({ target: document.getElementById('app') })
+  }
 }
 
+begin();
+
 export default app

src/pages/site/Home.svelte

@@ -1,2 +1,8 @@
+<script>
+    import { storeUsuario } from "../../stores/usuario";
+    let nombre_usuario = '';
+    $: nombre_usuario = `${$storeUsuario.first_name} ${$storeUsuario.last_name}`.trim() || $storeUsuario.username
+</script>
+
 <h1>Pagina de inicio</h1>
-<p>Hola</p>
+<p>Hola: {nombre_usuario}</p>

src/pages/site/Login.svelte

@@ -1,17 +1,18 @@
 <script>
-    import { getToken } from "../../services/auth";
+    import { runLogin } from "../../services/auth";
 
-    let form = {}
+    let form = { username:null, password: null }
     let loading = false;
+    let message = '';
 
     async function onSubmit() {
         try {
             loading = true;
-            const data = await getToken(form)
+            await runLogin(form)
-            sessionStorage.setItem('usuario', JSON.stringify(data))
             document.location.reload()
         } catch (error) {
-            alert(error.message || error)
+            message = error.detail || error
+            setTimeout(() => message = '', 5000)
         } finally {
             loading = false;
         }
@@ -39,4 +40,8 @@
         </div>
         <button>Acceder</button>
     </form>
+
+    {#if message}
+        <p>{message}</p>
+    {/if}
 </div>

src/services/_config.js

@@ -0,0 +1 @@
+export const base = import.meta.env.VITE_BACKEND || 'api';

src/services/auth.js

@@ -1,18 +1,32 @@
+import { base } from './_config'
 
-export function getToken({ username, password }) {
+export async function runLogin({ username, password }) {
-    return new Promise((resolve, reject) => {
+    const res = await fetch(`${base}/auth/`, {
-        setTimeout(() => {
+        method: 'POST',
-            if (username !== 'super') return reject("Usuario incorrecto");
+        body: JSON.stringify({ username, password }),
-            if (password !== 'super') return reject("Contaseña incorrecta");
+        headers: { "Content-Type": "application/json" }
-
-            const data = {
-                username: 'super',
-                first_name: 'Ronald',
-                last_name: 'Morales',
-                email: 'ronald@correo.com',
-                token: '123445555'
-            }
-            resolve(data)
-        }, 2000)
     })
+    if (!res.ok) throw await res.json()
+    const data = await res.json()
+    document.cookie = `token=${data.token}`
+    return data
 }
+
+export async function runLogout() {
+    const res = await fetch(`${base}/auth/logout/`, {
+        method: 'POST'
+    })
+    if (!res.ok) throw await res.json()
+    const data = await res.text()
+    document.cookie = 'token=';
+    return data;
+}
+
+export async function getInfoToken() {
+    const res = await fetch(`${base}/auth/info/`, {
+        credentials: 'include'
+    })
+    if (!res.ok) throw await res.json()
+    return await res.json()
+}
+

src/stores/usuario.js

@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+
+export const storeUsuario = writable(null)