fix: Improve browser navigation and prevent login page in history
- Fix back button redirecting to login page when authenticated - Add browser history management for SPA navigation between sections - Use window.location.replace() to prevent login page in history - Add URL hash support for bookmarkable sections
This commit is contained in:
+26
-6
@@ -107,9 +107,15 @@ class App {
|
|||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Handle browser back/forward buttons
|
||||||
|
window.addEventListener('popstate', (e) => {
|
||||||
|
const page = e.state?.page || 'home';
|
||||||
|
this.navigateTo(page, false); // false = don't add to history
|
||||||
|
});
|
||||||
|
|
||||||
// Initialize home page
|
// Initialize home page
|
||||||
await this.pages.home.init();
|
await this.pages.home.init();
|
||||||
this.navigateTo('home');
|
this.navigateTo('home', true); // true = replace history (don't add)
|
||||||
|
|
||||||
console.log('NodeCast TV initialized');
|
console.log('NodeCast TV initialized');
|
||||||
}
|
}
|
||||||
@@ -118,8 +124,8 @@ class App {
|
|||||||
const token = localStorage.getItem('authToken');
|
const token = localStorage.getItem('authToken');
|
||||||
|
|
||||||
if (!token) {
|
if (!token) {
|
||||||
// No token, redirect to login
|
// No token, redirect to login (replace to avoid back button issues)
|
||||||
window.location.href = '/login.html';
|
window.location.replace('/login.html');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -151,7 +157,7 @@ class App {
|
|||||||
} catch (err) {
|
} catch (err) {
|
||||||
console.error('Authentication error:', err);
|
console.error('Authentication error:', err);
|
||||||
localStorage.removeItem('authToken');
|
localStorage.removeItem('authToken');
|
||||||
window.location.href = '/login.html';
|
window.location.replace('/login.html');
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -184,13 +190,27 @@ class App {
|
|||||||
}
|
}
|
||||||
|
|
||||||
localStorage.removeItem('authToken');
|
localStorage.removeItem('authToken');
|
||||||
window.location.href = '/login.html';
|
window.location.replace('/login.html');
|
||||||
});
|
});
|
||||||
|
|
||||||
navbar.appendChild(logoutLink);
|
navbar.appendChild(logoutLink);
|
||||||
}
|
}
|
||||||
|
|
||||||
navigateTo(pageName) {
|
navigateTo(pageName, replaceHistory = false) {
|
||||||
|
// Don't navigate if already on this page
|
||||||
|
if (this.currentPage === pageName && !replaceHistory) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Update browser history
|
||||||
|
if (replaceHistory) {
|
||||||
|
// Replace current history entry (used on initial load)
|
||||||
|
history.replaceState({ page: pageName }, '', `#${pageName}`);
|
||||||
|
} else {
|
||||||
|
// Add new history entry
|
||||||
|
history.pushState({ page: pageName }, '', `#${pageName}`);
|
||||||
|
}
|
||||||
|
|
||||||
// Update nav
|
// Update nav
|
||||||
document.querySelectorAll('.nav-link').forEach(link => {
|
document.querySelectorAll('.nav-link').forEach(link => {
|
||||||
link.classList.toggle('active', link.dataset.page === pageName);
|
link.classList.toggle('active', link.dataset.page === pageName);
|
||||||
|
|||||||
+2
-2
@@ -255,8 +255,8 @@
|
|||||||
// Store token
|
// Store token
|
||||||
localStorage.setItem('authToken', data.token);
|
localStorage.setItem('authToken', data.token);
|
||||||
|
|
||||||
// Redirect to main app
|
// Redirect to main app (replace history to prevent back button issues)
|
||||||
window.location.href = '/';
|
window.location.replace('/');
|
||||||
|
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
errorMessage.textContent = err.message;
|
errorMessage.textContent = err.message;
|
||||||
|
|||||||
Reference in New Issue
Block a user