Nuxt3 Apollo 多认证头管理：实现会话与JWT共存的策略

// nuxt.config.ts
export default defineNuxtConfig({
  apollo: {
    authType: 'Session',
    authHeader: 'woocommerce-session',
    tokenStorage: 'cookie',
    tokenName: 'woocommerce-session',
    // ... 其他配置
    clients: {
      default: {
        httpEndpoint: process.env.PUBLIC_GRAPHQL_URL,
        // ... JWT 相关的配置可能会与上述会话配置冲突
        // authType: 'Bearer',
        // authHeader: 'Authorization',
        // tokenStorage: 'cookie'
      }
    }
  }
});

// apollo.js (Nuxt3 Plugin)
nuxtApp.hook('apollo:auth', ({ client, token }) => {
  token.value = wooSession.value; // 这里只能设置一个token
});

// plugins/apollo.js
import {
  createHttpLink,
  ApolloLink,
  from,
  InMemoryCache,
  ApolloClient
} from '@apollo/client/core';
import { setContext } from '@apollo/client/link/context';
import { provideApolloClient } from '@vue/apollo-composable';

export default defineNuxtPlugin((nuxtApp) => {
  // 从Cookie中获取认证信息
  const wooJWT = useCookie('woo-jwt'); // 存储JWT
  const wooSession = useCookie('woo-session', { // 存储WooCommerce会话ID
    maxAge: 86_400, // 会话有效期
    sameSite: 'lax' // SameSite策略
  });

  const config = useRuntimeConfig();

  // 1. HTTP 链路：定义GraphQL API的端点
  const httpLink = createHttpLink({
    uri: config.public.graphqlURL,
    // 确保发送凭据，例如Cookie
    credentials: 'include'
  });

  // 2. 认证链路：动态设置请求头
  const authLink = setContext(async (_, { headers }) => {
    // 根据Cookie中是否存在JWT和会话ID，动态添加相应的请求头
    return {
      headers: {
        ...headers, // 保留现有头
        // JWT 认证头
        authorization: wooJWT.value ? `Bearer ${wooJWT.value}` : '',
        // WooCommerce 会话头
        'woocommerce-session': wooSession.value
          ? `Session ${wooSession.value}`
          : ''
      }
    };
  });

  // 3. 后处理链路：从响应头中提取并更新会话信息
  const afterware = new ApolloLink((operation, forward) =>
    forward(operation).map((response) => {
      const context = operation.getContext();
      const {
        response: { headers } // 获取响应头
      } = context;

      // 检查并提取 'woocommerce-session' 响应头
      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 客户端实例
  // 将所有链路按顺序组合：认证 -> 后处理 -> HTTP请求
  const apolloClient = new ApolloClient({
    link: from([authLink, afterware, httpLink]),
    cache
  });

  // 6. 将自定义的 Apollo 客户端提供给 Vue Apollo Composable
  provideApolloClient(apolloClient);

  // 7. 【关键步骤】覆盖 Nuxt Apollo 的默认客户端
  // 移除 apollo:auth 钩子，并直接将自定义的 apolloClient 赋值给 Nuxt 应用的默认客户端。
  // 这会确保 Nuxt Apollo 内部使用我们完全控制的客户端实例。
  nuxtApp._apolloClients.default = apolloClient;
});

// nuxt.config.ts
import { defineNuxtConfig } from 'nuxt/config';

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

  apollo: {
    // 对于 default 客户端，以下配置可以移除或忽略，
    // 因为我们已经在 plugins/apollo.js 中完全自定义了客户端。
    // authType: 'Session',
    // authHeader: 'woocommerce-session',
    // tokenStorage: 'cookie',
    // tokenName: 'woocommerce-session',

    clients: {
      default: {
        httpEndpoint: process.env.PUBLIC_GRAPHQL_URL,
        httpLinkOptions: {
          credentials: 'include'
        }
        // 对于 default 客户端，这里也不再需要设置 authType 等，
        // 除非你有其他命名客户端需要 Nuxt Apollo 的默认认证机制。
        // authType: 'Bearer',
        // authHeader: 'Authorization',
        // tokenStorage: 'cookie'
      }
    }
  }
});