Nuxt 3 Apollo 多重认证头部管理：突破默认限制的实践指南

// nuxt.config.ts (示例配置，可能导致冲突)
export default defineNuxtConfig({
  apollo: {
    authType: 'Session', // 或 'Bearer'
    authHeader: 'woocommerce-session', // 或 'Authorization'
    tokenStorage: 'cookie',
    tokenName: 'woocommerce-session', // 或 'woo-jwt'
    clients: {
      default: {
        httpEndpoint: process.env.PUBLIC_GRAPHQL_URL,
        httpLinkOptions: {
          credentials: 'include'
        }
      }
    }
  }
});

// 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) => {
  // 从 Nuxt 提供的 useCookie 组合式函数中获取或设置 Cookie
  const wooJWT = useCookie('woo-jwt'); // 用于存储 JWT
  const wooSession = useCookie('woo-session', { // 用于存储 WooCommerce 会话
    maxAge: 86_400, // 会话有效期
    sameSite: 'lax' // SameSite 策略
  });

  const config = useRuntimeConfig();

  // 1. 创建 HTTP Link：指向 GraphQL 后端地址
  const httpLink = createHttpLink({
    uri: config.public.graphqlURL,
    // 确保发送凭据，例如 Cookie
    credentials: 'include'
  });

  // 2. 创建 Auth Link (setContext)：在请求发出前设置认证头部
  const authLink = setContext(async (_, { headers }) => {
    // 同时检查并设置 JWT Authorization 和 WooCommerce Session 头部
    return {
      headers: {
        ...headers, // 保留现有头部
        // 设置 JWT 认证头部
        authorization: wooJWT.value ? `Bearer ${wooJWT.value}` : '',
        // 设置 WooCommerce 会话头部
        'woocommerce-session': wooSession.value
          ? `Session ${wooSession.value}`
          : ''
      }
    };
  });

  // 3. 创建 Afterware Link：处理 GraphQL 响应，特别是更新 WooCommerce 会话
  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');

      // 如果客户端且会话存在，则更新本地 Cookie
      if (process.client && session) {
        if (session !== wooSession.value) {
          wooSession.value = session; // 更新会话 Cookie
        }
      }
      return response;
    })
  );

  // 4. 创建缓存实例
  const cache = new InMemoryCache();

  // 5. 组合所有 Link 并创建 Apollo Client 实例
  const apolloClient = new ApolloClient({
    link: from([authLink, afterware, httpLink]), // 按照顺序组合 Link
    cache,
    // 默认查询策略，可根据需要调整
    defaultOptions: {
      watchQuery: {
        fetchPolicy: 'cache-and-network',
        errorPolicy: 'all',
      },
      query: {
        fetchPolicy: 'network-only',
        errorPolicy: 'all',
      },
      mutate: {
        errorPolicy: 'all',
      },
    }
  });

  // 6. 使用 @vue/apollo-composable 提供的函数，将客户端提供给 Vue 组件
  provideApolloClient(apolloClient);

  // 7. 【关键步骤】覆盖 Nuxt Apollo 模块的默认客户端实例
  // 这一行代码确保 Nuxt Apollo 模块使用我们手动配置的客户端
  // 而不是其内部自动生成的客户端，从而完全掌控认证头部和链路
  nuxtApp._apolloClients.default = apolloClient;

  // 移除或注释掉 Nuxt Apollo 模块的 'apollo:auth' 钩子
  // nuxtApp.hook('apollo:auth', ({ client, token }) => {
  //   token.value = wooSession.value;
  // });
});

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

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

  apollo: {
    // 移除所有与认证相关的配置，如 authType, authHeader, tokenStorage, tokenName
    // 因为这些现在都由 apollo.js 插件中的手动配置控制
    // authType: 'Session', // <-- 移除
    // authHeader: 'woocommerce-session', // <-- 移除
    // tokenStorage: 'cookie', // <-- 移除
    // tokenName: 'woocommerce-session', // <-- 移除

    clients: {
      default: {
        // 仅保留 httpEndpoint 和 httpLinkOptions 中非认证相关的部分
        // httpEndpoint 可以保留，如果需要在运行时配置 GraphQL URL
        httpEndpoint: process.env.PUBLIC_GRAPHQL_URL,
        httpLinkOptions: {
          credentials: 'include' // 这可以保留，或者在 createHttpLink 中设置
        }
        // 如果这里有其他认证相关的配置，也应移除
        // authType: 'Bearer', // <-- 移除
        // authHeader: 'Authorization', // <-- 移除
        // tokenStorage: 'cookie' // <-- 移除
      }
    }
  }
});