如何配置API类，使其在服务端与客户端组件中均可添加Session Token？

核心问题原因 #

你当前使用的auth()是Auth.js的服务端专属API，仅能在服务端组件、API路由中调用；客户端组件直接调用会报错，因为客户端无法访问服务端的会话存储环境。

两种可行解决方案 #

方案一：API类自动适配环境（推荐） #

通过判断运行环境，分别调用服务端/客户端的会话获取方法，让API类无需外部传入token即可自动处理认证逻辑。

步骤1：导入客户端会话方法

根据你的NextAuth版本导入对应API：

• NextAuth v4：从next-auth/react导入getSession
• NextAuth v5：直接从你的../lib/auth配置文件中导入getSession

步骤2：修改API类的setRequestToken方法

import { SessionUserType } from '@/types/auth.types';
import { auth } from '../lib/auth';
// NextAuth v4 请添加这行导入：
import { getSession } from 'next-auth/react';

class ApiService {

    private async setRequestToken() {
        let token = '';

        // 区分服务端/客户端环境
        if (typeof window === 'undefined') {
            // 服务端场景：沿用原有的auth()方法
            const session = await auth();
            const user = session?.user as SessionUserType;
            token = user?.access_token ? `Bearer ${user.access_token}` : '';
        } else {
            // 客户端场景：使用Auth.js客户端会话API
            const session = await getSession();
            const user = session?.user as SessionUserType;
            token = user?.access_token ? `Bearer ${user.access_token}` : '';
        }

        return token;
    }

    async get(url: string) {
        const response = await fetch(url, {
            headers: {
                'Authorization': await this.setRequestToken()
            }
        });

        return this.handleResponse(response);
    }

    // post/put等其他请求方法可直接复用setRequestToken逻辑
}

方案二：组件传递token（更符合React钩子规范） #

由于React钩子（如useSession）仅能在组件内部调用，你可以在客户端组件中先获取会话token，再传递给API类的方法。

步骤1：修改API类方法，支持传入token参数

class ApiService {
    // 服务端仍保留原有获取token的逻辑
    private async setRequestToken() {
        const session = await auth();
        const user = session?.user as SessionUserType;
        return user?.access_token ? `Bearer ${user.access_token}` : '';
    }

    async get(url: string, token?: string) {
        // 优先使用组件传入的token，否则自动调用服务端逻辑
        const authToken = token || await this.setRequestToken();
        const response = await fetch(url, {
            headers: {
                'Authorization': authToken
            }
        });

        return this.handleResponse(response);
    }
}

步骤2：客户端组件中调用API类

import { useSession } from 'next-auth/react';
import ApiService from '@/services/api.service';

const ClientComponent = () => {
    const { data: session } = useSession();
    const apiService = new ApiService();

    const fetchData = async () => {
        // 从会话中提取并格式化token
        const token = session?.user.access_token ? `Bearer ${session.user.access_token}` : '';
        const result = await apiService.get('/your-api-endpoint', token);
        // 处理返回结果
    };

    return <button onClick={fetchData}>获取数据</button>;
};

export default ClientComponent;

注意事项 #

• 若使用NextAuth v5，请确认getSession的客户端API是否符合当前版本规范（v5对客户端会话方法有调整）。
• 客户端环境下，getSession会从浏览器cookie读取会话信息，请确保Auth.js配置已启用cookie存储。

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