如何在Faust.js前端实现HTTP基础认证（无需转TypeScript）

我用Faust.js构建Headless WordPress前端，遇到以下问题：WordPress后端要求携带Base64编码凭证的HTTP基础认证才能访问内容，本地环境无需添加凭证即可正常请求，但生产环境因缺少认证头，无法获取文章内容及图片资源。

找到的解决方案示例都是TypeScript版本，不想将项目转为TypeScript（避免破坏现有node_modules），自行改写为JavaScript后构建报错，代码及错误信息如下：

改写后的错误代码 #

import { IncomingMessage } from 'http';
import { getClient, logQueries } from '@faustjs/next';

import {
   generatedSchema,
   scalarsEnumsHash,
   GeneratedSchema,
   SchemaObjectTypes,
   SchemaObjectTypesNames,
} from './schema.generated';

export const client = getClient({
   GeneratedSchema,
   SchemaObjectTypesNames,
   SchemaObjectTypes,
   schema: generatedSchema,
   scalarsEnumsHash,
   applyRequestContext: async (url, init) => {
        const newInit = {
            ...init,
            headers: {
                ...init.headers,
                authorization: 'Basic YmxhbmtkZXhzaXRzdGc6OTMzODVlNjY=',
            },
        };

        return { url, init: newInit };
    },
});

export function serverClient(req) {
   return getClient<GeneratedSchema, SchemaObjectTypesNames, SchemaObjectTypes>({
     schema: generatedSchema,
     scalarsEnumsHash,
     context: req,
   });
}

if (process.env.NODE_ENV === 'development') {
  logQueries(client);
}

export * from './schema.generated';

报错信息 #

• 1:1 Error: There should be at least one empty line between import groups import/order
• 8:3 Error: GeneratedSchema not found in './schema.generated' import/named
• 9:3 Error: SchemaObjectTypes not found in './schema.generated' import/named
• 10:3 Error: SchemaObjectTypesNames not found in './schema.generated' import/named

错误修复及正确代码实现 #

1. 修复import顺序格式问题 #

ESLint的import/order规则要求Node.js核心模块与第三方模块的导入之间空一行，调整导入代码：

import { IncomingMessage } from 'http';

import { getClient, logQueries } from '@faustjs/next';

2. 移除TypeScript专属类型依赖 #

纯JavaScript项目中，GeneratedSchema、SchemaObjectTypes、SchemaObjectTypesNames都是TypeScript的类型定义，schema.generated.js不会导出这些内容，直接移除相关导入及调用参数。

3. 修正客户端与服务端请求配置 #

服务端的serverClient同样需要添加认证头，避免服务端渲染时请求失败。同时建议将认证凭证存入环境变量，不要硬编码到代码中。

最终正确代码 #

import { IncomingMessage } from 'http';

import { getClient, logQueries } from '@faustjs/next';
import { generatedSchema, scalarsEnumsHash } from './schema.generated';

// 从环境变量读取认证凭证，生产环境在.env.production中配置
const WP_AUTH_HEADER = process.env.WP_AUTH_CREDENTIALS;

export const client = getClient({
  schema: generatedSchema,
  scalarsEnumsHash,
  applyRequestContext: async (url, init) => {
    const newInit = {
      ...init,
      headers: {
        ...init.headers,
        // 仅生产环境添加认证头，本地环境跳过
        ...(process.env.NODE_ENV === 'production' && { authorization: WP_AUTH_HEADER }),
      },
    };

    return { url, init: newInit };
  },
});

export function serverClient(req) {
  return getClient({
    schema: generatedSchema,
    scalarsEnumsHash,
    context: req,
    applyRequestContext: async (url, init) => {
      const newInit = {
        ...init,
        headers: {
          ...init.headers,
          ...(process.env.NODE_ENV === 'production' && { authorization: WP_AUTH_HEADER }),
        },
      };

      return { url, init: newInit };
    },
  });
}

if (process.env.NODE_ENV === 'development') {
  logQueries(client);
}

export * from './schema.generated';

环境变量配置示例 #

在项目根目录创建.env.production文件：

WP_AUTH_CREDENTIALS=Basic YmxhbmtkZXhzaXRzdGc6OTMzODVlNjY=

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