Next.js 13（App目录）：登录状态变更后如何触发根布局更新？

Next.js 13+的根布局默认是Server Component，且不会随页面导航重新渲染，所以直接在布局里调用isLoggedIn()无法自动感知客户端的登录/登出状态变化。下面是几种可行的解决方法：

方法一：用React Context管理全局登录状态 #

通过创建客户端侧的全局上下文，将登录状态和状态更新方法注入到整个应用中，让Navbar能实时响应状态变化。

1. 创建Auth上下文组件 #

'use client';

import { createContext, useContext, useState, useEffect } from 'react';

const AuthContext = createContext();

export function AuthProvider({ children }) {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  // 初始化时从本地存储读取JWT判断登录状态
  useEffect(() => {
    const token = localStorage.getItem('jwt');
    setIsLoggedIn(!!token);
  }, []);

  // 登录成功后更新状态并存储令牌
  const login = (token) => {
    localStorage.setItem('jwt', token);
    setIsLoggedIn(true);
  };

  // 登出时清除令牌并更新状态
  const logout = () => {
    localStorage.removeItem('jwt');
    setIsLoggedIn(false);
  };

  return (
    <AuthContext.Provider value={{ isLoggedIn, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

export function useAuth() {
  return useContext(AuthContext);
}

2. 修改根布局注入上下文 #

// app/layout.js
import { AuthProvider } from './auth-context';
import Navbar from './navbar';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <AuthProvider>
          <Navbar />
          <main>
            {children}
          </main>
        </AuthProvider>
      </body>
    </html>
  );
}

3. 改造Navbar为客户端组件消费上下文 #

// app/navbar.js
'use client';

import { useAuth } from './auth-context';
import { useRouter } from 'next/navigation';

export default function Navbar() {
  const { isLoggedIn, logout } = useAuth();
  const router = useRouter();

  const handleLogout = () => {
    logout();
    router.push('/');
  };

  return (
    <nav>
      {!isLoggedIn ? (
        <>
          <a href="/signup">注册</a>
          <a href="/signin">登录</a>
        </>
      ) : (
        <button onClick={handleLogout}>登出</button>
      )}
    </nav>
  );
}

4. 在登录组件中调用登录方法 #

// app/signin/page.js
'use client';

import { useAuth } from '../auth-context';
import { useRouter } from 'next/navigation';

export default function SignInPage() {
  const { login } = useAuth();
  const router = useRouter();

  const handleSubmit = async (e) => {
    e.preventDefault();
    // 发起登录请求，获取JWT令牌
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ /* 用户名、密码等表单数据 */ }),
      headers: { 'Content-Type': 'application/json' }
    });
    const data = await res.json();
    
    if (data.token) {
      login(data.token);
      router.push('/');
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      {/* 登录表单元素 */}
      <button type="submit">登录</button>
    </form>
  );
}

方法二：监听路由变化重新检查登录状态 #

如果不想用全局上下文，可以在Navbar客户端组件中监听路由跳转事件，每次页面导航时重新检查本地存储的登录令牌。

// app/navbar.js
'use client';

import { useState, useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';

export default function Navbar() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const pathname = usePathname();
  const router = useRouter();

  // 检查登录状态的通用方法
  const checkAuthStatus = () => {
    const token = localStorage.getItem('jwt');
    setIsLoggedIn(!!token);
  };

  // 初始化和路由变化时重新检查状态
  useEffect(() => {
    checkAuthStatus();
  }, [pathname]);

  const handleLogout = () => {
    localStorage.removeItem('jwt');
    setIsLoggedIn(false);
    router.push('/');
  };

  return (
    <nav>
      {!isLoggedIn ? (
        <>
          <a href="/signup">注册</a>
          <a href="/signin">登录</a>
        </>
      ) : (
        <button onClick={handleLogout}>登出</button>
      )}
    </nav>
  );
}

方法三：结合Server Component与Cookie（进阶） #

如果你的登录状态存在HttpOnly Cookie中，可以在根布局的Server Component部分读取Cookie判断初始状态，但仍需将Navbar设为客户端组件，通过客户端事件（如登录/登出后的路由跳转）触发状态刷新，或者使用revalidatePath强制页面重新生成（适合静态站点场景）。

内容的提问来源于stack exchange，提问作者Peter Petrus