PersonalWebApplication/Client/src/App.tsx

import { useEffect, useState } from 'react'
import { CursorFollower } from './components/CursorFollower'
import { LoginPage } from './components/LoginPage'
import { BlogPage } from './components/BlogPage'
import { StartPage } from './components/StartPage'
import { useAuth } from './hooks/useAuth'

function App() {
  // 登录态从 localStorage/sessionStorage 恢复：已登录直接进博客页。
  const auth = useAuth()
  // 未登录默认进导航页；点齿轮切到登录页。
  const [showLogin, setShowLogin] = useState(false)
  const signOut = auth.signOut

  // 进登录页：往浏览器历史压一条记录，便于返回键退回。
  const openLogin = () => {
    window.history.pushState({ page: 'login' }, '')
    setShowLogin(true)
  }

  // “返回等于登出”：退回导航页时清掉登录态。
  // 浏览器返回键 / 登录页返回 / 博客页登出 都汇到这里。
  useEffect(() => {
    const onPop = () => {
      signOut()
      setShowLogin(false)
    }
    window.addEventListener('popstate', onPop)
    return () => window.removeEventListener('popstate', onPop)
  }, [signOut])

  // 博客页登出：若是从登录流程进来的（历史里有 login 记录），走 history.back()
  // 让浏览器历史保持干净；否则（如记住登录直接进博客）直接回首页。
  const signOutFromBlog = () => {
    if (window.history.state?.page === 'login') {
      window.history.back()
    } else {
      signOut()
      setShowLogin(false)
    }
  }

  let view
  if (auth.username) {
    view = <BlogPage username={auth.username} onSignOut={signOutFromBlog} />
  } else if (showLogin) {
    view = <LoginPage onSignIn={auth.signIn} onBack={() => window.history.back()} />
  } else {
    view = <StartPage onOpenSettings={openLogin} />
  }

  return (
    <>
      <CursorFollower />
      {view}
    </>
  )
}

export default App