auth

2026-02-24 21:49:23 +09:00
parent 9ade18903c
commit 1d539e44ac
3 changed files with 89 additions and 17 deletions
--- a/public/api.js
+++ b/public/api.js
@@ -0,0 +1,20 @@
+export async function authFetch(url, options = {}) {
+  const token = localStorage.getItem("token"); // hol den JWT aus localStorage
+
+  // füge Headers zusammen: Content‑Type + Bearer Token
+  const headers = {
+    "Content-Type": "application/json",
+    ...options.headers,     // vorhandene Header nicht überschreiben
+    ...(token ? { 
+      "Authorization": `Bearer ${token}`  // 🔑 wichtiger Header
+    } : {})
+  };
+
+  // führe den fetch aus mit dem zusammengebauten Header
+  const response = await fetch(url, {
+    ...options,
+    headers
+  });
+
+  return response; // response weitergeben
+}
--- a/public/dashboard.html
+++ b/public/dashboard.html
@@ -2,29 +2,23 @@
 <html lang="de">
 <head>
    <meta charset="UTF-8">
-    <title>Dashboard</title>
+    <title>Dashboard - Schic App</title>
    <link rel="stylesheet" href="styles.css">
 </head>
 <body>
-
    <div class="container">
        <h1>Dashboard</h1>
-        <p>Login erfolgreich 🎉</p>
-        <button id="logout">Logout</button>
+        <p id="welcomeMessage">Willkommen …</p>
+
+        <button id="logoutBtn">Logout</button>
+
+        <h2>Todos</h2>
+        <ul id="todosList"></ul>
+
+        <p id="errorMessage" class="error"></p>
    </div>

-    <script>
-        const token = localStorage.getItem("token")
-
-        if (!token) {
-            window.location.href = "login.html"
-        }
-
-        document.getElementById("logout").addEventListener("click", () => {
-            localStorage.removeItem("token")
-            window.location.href = "login.html"
-        })
-    </script>
-
+    <!-- Lade das Dashboard‑Script -->
+    <script type="module" src="dashboard.js"></script>
 </body>
 </html>
--- a/public/dashboard.js
+++ b/public/dashboard.js
@@ -0,0 +1,58 @@
+// dashboard.js
+import { authFetch } from "api.js";
+
+// Element‑Referenzen
+const welcomeMessage = document.getElementById("welcomeMessage");
+const todosList = document.getElementById("todosList");
+const errorMessage = document.getElementById("errorMessage");
+const logoutBtn = document.getElementById("logoutBtn");
+
+// Prüfe ob ein JWT vorhanden ist
+const token = localStorage.getItem("token");
+if (!token) {
+  // Kein Token → zurück zur Login‑Seite
+  window.location.href = "login.html";
+}
+
+// Logout – Token löschen + weiterleiten
+logoutBtn.addEventListener("click", () => {
+    localStorage.removeItem("token");
+    window.location.href = "login.html";
+});
+
+// Lade Todos vom Backend
+async function loadTodos() {
+  try {
+    const res = await authFetch("/todos"); // fetchWrapper sendet den JWT Automatisch
+    if (!res.ok) {
+      errorMessage.textContent = "Fehler beim Abrufen der Todos!";
+      if (res.status === 401) {
+        window.location.href = "login.html"; // bei ungültigem Token zum Login
+      }
+      return;
+    }
+
+    const todos = await res.json();
+
+    // Zeige Todos in der Liste an
+    todosList.innerHTML = "";
+    if (Array.isArray(todos) && todos.length > 0) {
+      todos.forEach(todo => {
+        const li = document.createElement("li");
+        li.textContent = todo.task;
+        todosList.appendChild(li);
+      });
+    } else {
+      todosList.innerHTML = "<li>Keine Todos gefunden.</li>";
+    }
+  } catch (err) {
+    console.error("Fetch Error:", err);
+    errorMessage.textContent = "Serverfehler beim Laden!";
+  }
+}
+
+// Willkommenstext setzen
+welcomeMessage.textContent = "Willkommen zum Dashboard!";
+
+// Rufe die Todos ab
+loadTodos();