diff --git a/src/router.js b/src/routers/router.js similarity index 81% rename from src/router.js rename to src/routers/router.js index 326f7698..5f7006ac 100644 --- a/src/router.js +++ b/src/routers/router.js @@ -1,6 +1,7 @@ -import { userStore } from "./store/userStore"; +import { userStore } from "../store/userStore"; const AUTH_REQUIRED_PAGES = ["/profile"]; + export default class Router { #routes = {}; @@ -10,16 +11,19 @@ export default class Router { init() { this.handleEventListeners(); - // const hash = window.location.hash; - // console.log("πŸš€ ~ Router ~ init ~ hash:", hash); - const path = window.location.pathname; - // console.log("πŸš€ ~ Router ~ init ~ path:", path); - // this.navigate(hash ?? path); + const path = this.isHash() + ? window.location.hash + : window.location.pathname; + this.navigate(path); } navigate(path) { const root = document.getElementById("root"); + + if (this.isHash()) { + path = location.hash.slice(1) || "/"; + } const authenticatedPath = this.checkAuth(path); const render = this.#routes[authenticatedPath] || this.#routes["/404"]; @@ -28,6 +32,7 @@ export default class Router { checkAuth(path) { let authenticatedPath = path; + if (AUTH_REQUIRED_PAGES.includes(path) && !userStore.isLoggedIn()) { alert("둜그인이 ν•„μš”ν•œ νŽ˜μ΄μ§€μž…λ‹ˆλ‹€."); authenticatedPath = "/login"; @@ -35,11 +40,13 @@ export default class Router { alert("이미 λ‘œκ·ΈμΈλ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€."); authenticatedPath = "/"; } + return authenticatedPath; } handleEventListeners() { this.handleLinkClick(); + this.handleHashChange(); this.handlePopstate(); } @@ -62,8 +69,7 @@ export default class Router { e.preventDefault(); const href = target.getAttribute("href"); - const isHash = location.hash.slice(1); - if (isHash) { + if (this.isHash()) { window.location.hash = href; return; } @@ -72,4 +78,8 @@ export default class Router { } }); } + + isHash() { + return location.hash && location.hash.startsWith("#"); + } }