Nuxt3 Apollo 高级认证：同时管理多重请求头（JWT与会话）

import {
  createHttpLink,
  ApolloLink,
  from,
  InMemoryCache,
  ApolloClient
} from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import { provideApolloClient } from '@vue/apollo-composable'; // 用于 Vue 组合式 API

export default defineNuxtPlugin((nuxtApp) => {
  // 从 Cookie 中获取 JWT 令牌和 WooCommerce 会话 ID
  const wooJWT = useCookie('woo-jwt');
  const wooSession = useCookie('woo-session', {
    maxAge: 86_400, // 会话 Cookie 有效期，例如 1 天
    sameSite: 'lax' // 跨站请求策略
  });

  const config = useRuntimeConfig();

  // 1. HTTP Link: 定义 GraphQL 后端地址
  const httpLink = createHttpLink({
    uri: config.public.graphqlURL,
  });

  // 2. Auth Link: 动态设置认证请求头
  // 使用 setContext 确保在每次请求前检查并设置最新的 JWT 和会话 ID
  const authLink = setContext(async (_, { headers }) => {
    return {
      headers: {
        ...headers,
        // 如果存在 JWT，则添加 Authorization 请求头
        authorization: wooJWT.value ? `Bearer ${wooJWT.value}` : '',
        // 如果存在 WooCommerce 会话 ID，则添加 woocommerce-session 请求头
        'woocommerce-session': wooSession.value
          ? `Session ${wooSession.value}`
          : ''
      }
    };
  });

  // 3. Afterware Link: 处理来自响应的请求头
  // 监听响应头，例如更新 WooCommerce 会话 ID
  const afterware = new ApolloLink((operation, forward) =>
    forward(operation).map((response) => {
      const context = operation.getContext();
      const {
        response: { headers }
      } = context;
      const session = headers.get('woocommerce-session');

      if (process.client && session) {
        // 如果响应头中包含新的会话 ID，则更新本地 Cookie
        if (session !== wooSession.value) {
          wooSession.value = session;
        }
      }
      return response;
    })
  );

  // 4. 缓存实现
  const cache = new InMemoryCache();

  // 5. 创建 Apollo Client 实例
  // 将 authLink, afterware, httpLink 按顺序链式组合
  const apolloClient = new ApolloClient({
    link: from([authLink, afterware, httpLink]),
    cache
  });

  // 如果需要直接在 Vue 组合式 API 中使用，可以保留此行
  // 否则，通过 nuxtApp._apolloClients.default 赋值已经足够
  provideApolloClient(apolloClient);

  /**
   * 关键步骤：
   * 移除 Nuxt Apollo 的 'apollo:auth' 钩子，
   * 并手动将自定义的 apolloClient 实例赋值给 Nuxt 应用的默认 Apollo 客户端。
   * 这将完全覆盖 Nuxt Apollo 模块的默认客户端配置，确保我们的自定义设置生效。
   */
  // nuxtApp.hook('apollo:auth', ({ client, token }) => {
  //   // 此钩子应被移除或注释，因为它与自定义 Auth Link 冲突
  //   // token.value = wooSession.value;
  // });
  nuxtApp._apolloClients.default = apolloClient;
});

import { defineNuxtConfig } from 'nuxt/config';

export default defineNuxtConfig({
  // ... 其他 Nuxt 配置

  apollo: {
    // 移除或注释掉所有与认证相关的全局配置，
    // 因为认证逻辑已完全在 apollo.js 插件中处理。
    // authType: 'Session',
    // authHeader: 'woocommerce-session',
    // tokenStorage: 'cookie',
    // tokenName: 'woocommerce-session',

    clients: {
      default: {
        // 仅保留 HTTP 端点配置，确保与插件中的 httpLink.uri 一致
        httpEndpoint: process.env.PUBLIC_GRAPHQL_URL,
        httpLinkOptions: {
          credentials: 'include' // 如果需要发送 Cookie，请保留此选项
        }

        // 移除或注释掉客户端特定的 JWT 认证配置
        // authType: 'Bearer',
        // authHeader: 'Authorization',
        // tokenStorage: 'cookie'
      }
    }
  }
});