Browser Zurück/Vor-Navigation: pushState statt replaceState, popstate-Event

wwwroot/js/app.js

@@ -4,25 +4,35 @@ document.addEventListener('DOMContentLoaded', async () => {
   // Auth-Check: Eingeloggt?
   var user = await apiMe();
   if (!user) {
-    await navigateTo('login');
+    await navigateTo('login', {}, { replace: true });
     return;
   }
 
   const { page, id } = parseHash();
   var target = page === 'login' ? 'dashboard' : page;
-  await navigateTo(target, { id });
+  await navigateTo(target, { id }, { replace: true });
 });
 
-// Hash-Änderungen abfangen
-window.addEventListener('hashchange', async () => {
-  const { page, id } = parseHash();
+// Browser Zurück/Vor-Button
+window.addEventListener('popstate', async (e) => {
+  var page, id;
+  if (e.state && e.state.page) {
+    page = e.state.page;
+    id = e.state.params ? e.state.params.id : null;
+  } else {
+    const parsed = parseHash();
+    page = parsed.page;
+    id = parsed.id;
+  }
+
   // Login-Seite immer erlauben, alles andere nur wenn eingeloggt
   if (page !== 'login') {
     var user = await apiMe();
     if (!user) {
-      await navigateTo('login');
+      await navigateTo('login', {}, { replace: true });
       return;
     }
   }
-  await navigateTo(page, { id });
+
+  await navigateTo(page, { id }, { replace: true });
 });

wwwroot/js/pages/chat-page.js

@@ -166,7 +166,7 @@ registerPage('chat', {
     // Zurück zum Dashboard
     const backBtn = document.getElementById('chatBackBtn');
     if (backBtn) {
-      backBtn.addEventListener('click', () => navigateTo('dashboard'));
+      backBtn.addEventListener('click', () => history.back());
     }
 
     // Send / Stop

wwwroot/js/router.js

@@ -2,12 +2,13 @@
 
 const routes = {};
 let currentPage = null;
+let isNavigating = false;
 
 function registerPage(name, { init, destroy }) {
   routes[name] = { init, destroy };
 }
 
-async function navigateTo(page, params = {}) {
+async function navigateTo(page, params = {}, options = {}) {
   const app = document.getElementById('app');
 
   // Tooltip verstecken
@@ -32,7 +33,11 @@ async function navigateTo(page, params = {}) {
 
   // URL Hash setzen
   const hash = params.id ? `${page}/${params.id}` : page;
-  history.replaceState(null, '', `#${hash}`);
+  if (options.replace) {
+    history.replaceState({ page, params }, '', `#${hash}`);
+  } else {
+    history.pushState({ page, params }, '', `#${hash}`);
+  }
 
   // Page initialisieren
   if (routes[page] && routes[page].init) {
@@ -41,7 +46,7 @@ async function navigateTo(page, params = {}) {
 
   // Back-Buttons verdrahten
   document.querySelectorAll('.back-btn[data-page]').forEach(btn => {
-    btn.addEventListener('click', () => navigateTo(btn.dataset.page));
+    btn.addEventListener('click', () => history.back());
   });
 }