NextJS中如何让客户端与服务端组件共享用户信息及Token？

核心思路 #

要让两类组件都能访问用户的姓名、ID和Token，需要结合服务端会话管理和客户端状态同步，同时兼顾安全性（Token需避免不必要的客户端暴露）。

具体实现步骤 #

1. 服务端会话存储（安全保存用户数据） #

用加密会话机制在服务端存储用户信息，避免Token直接暴露给客户端。以iron-session为例：

// app/api/login/route.js
import { IronSession } from 'iron-session';
import { cookies } from 'next/headers';

export async function POST(request) {
  const { username, password } = await request.json();
  // 调用.NET API完成登录验证
  const apiRes = await fetch('https://your-dotnet-api/login', {
    method: 'POST',
    body: JSON.stringify({ username, password }),
    headers: { 'Content-Type': 'application/json' }
  });
  const userData = await apiRes.json();
  
  if (apiRes.ok) {
    const session = await IronSession(cookies(), {
      password: process.env.SESSION_SECRET,
      cookieName: 'user-session',
      cookieOptions: { 
        secure: process.env.NODE_ENV === 'production',
        httpOnly: true
      }
    });
    // 存储用户核心数据到加密会话
    session.user = {
      id: userData.id,
      name: userData.name,
      token: userData.token
    };
    await session.save();
    return Response.json({ success: true });
  }
  return Response.json({ success: false }, { status: 401 });
}

2. 服务端组件访问用户信息 #

服务端组件可直接从会话读取数据，用于页面渲染或API请求：

// app/layout.js（服务端组件）
import { IronSession } from 'iron-session';
import { cookies } from 'next/headers';

export default async function RootLayout({ children }) {
  const session = await IronSession(cookies(), {
    password: process.env.SESSION_SECRET,
    cookieName: 'user-session'
  });
  const user = session.user || null;
  
  return (
    <html>
      <body>
        <header>
          {user && <span>欢迎，{user.name}</span>}
        </header>
        {children}
      </body>
    </html>
  );
}

调用外部.NET API时，直接从会话取Token放入请求头：

// app/api/fetch-data/route.js（服务端API路由）
import { IronSession } from 'iron-session';
import { cookies } from 'next/headers';

export async function GET() {
  const session = await IronSession(cookies(), {
    password: process.env.SESSION_SECRET,
    cookieName: 'user-session'
  });
  if (!session.user?.token) {
    return Response.json({ error: '未授权' }, { status: 401 });
  }
  // 调用.NET API并携带Token
  const dataRes = await fetch('https://your-dotnet-api/data', {
    headers: { Authorization: `Bearer ${session.user.token}` }
  });
  return Response.json(await dataRes.json());
}

3. 客户端组件访问用户信息 #

客户端组件无法直接读取服务端会话，可通过两种方式获取数据：

• 父服务端组件传props：适合静态展示场景

  // app/page.js（服务端组件）
  import ClientHeader from './client-header';
  import { IronSession } from 'iron-session';
  import { cookies } from 'next/headers';
  
  export default async function HomePage() {
    const session = await IronSession(cookies(), {
      password: process.env.SESSION_SECRET,
      cookieName: 'user-session'
    });
    const user = session.user ? { id: session.user.id, name: session.user.name } : null;
    
    return (
      <div>
        <ClientHeader user={user} />
      </div>
    );
  }
  

  // app/client-header.js（客户端组件）
  'use client';
  
  export default function ClientHeader({ user }) {
    return user ? <p>当前用户：{user.name}</p> : <button>去登录</button>;
  }
  

• 客户端调用API路由：适合动态获取场景

  // app/api/user-info/route.js
  import { IronSession } from 'iron-session';
  import { cookies } from 'next/headers';
  
  export async function GET() {
    const session = await IronSession(cookies(), {
      password: process.env.SESSION_SECRET,
      cookieName: 'user-session'
    });
    // 只返回客户端需要的信息，不暴露Token
    const userInfo = session.user ? {
      id: session.user.id,
      name: session.user.name
    } : null;
    return Response.json(userInfo);
  }
  

  // app/client-profile.js（客户端组件）
  'use client';
  import { useEffect, useState } from 'react';
  
  export default function ClientProfile() {
    const [user, setUser] = useState(null);
    
    useEffect(() => {
      fetch('/api/user-info')
        .then(res => res.json())
        .then(data => setUser(data));
    }, []);
    
    return user ? <div>用户ID：{user.id}</div> : <div>未登录</div>;
  }
  

4. 安全性注意事项 #

• Token仅在服务端存储和使用，客户端仅在需直接调用.NET API时才传递，且要做好XSS防护。
• 会话Cookie需开启httpOnly: true和secure: true（生产环境），防止脚本读取和明文传输。
• SESSION_SECRET使用强随机字符串，避免会话被篡改。

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