在React应用中实现沙盒与生产环境的动态切换与API管理

// environment.js
const ENVS = {
  LOCAL: "local",
  SANDBOX: "sandbox",
  PROD: "prod",
};

// 定义不同环境的详细配置
const Environments = {
  Sandbox: {
    name: "Sandbox",
    env: "sandbox",
    apiHost: "http://localhost:8000", // 示例沙盒API主机
    apiBase: "/api/v1",
  },
  Prod: {
    name: "Production",
    env: "prod",
    apiHost: "http://localhost:4000", // 示例生产API主机
    apiBase: "/api/v1",
  },
  // 您可以根据需要添加更多环境，例如：
  // Local: {
  //   name: "Local",
  //   env: "local",
  //   apiHost: "http://localhost:3000",
  //   apiBase: "/api/v1",
  // },
};

// 存储当前激活的环境
const Environment = {
  current: Environments.Prod, // 默认设置为生产环境
};

// 定义主机名匹配规则，用于自动检测环境
const ENV_MATCHERS = {
  [ENVS.LOCAL]: ["localhost", "127.0.0.1"],
  [ENVS.SANDBOX]: ["sandbox"], // 假设沙盒环境的URL中包含"sandbox"
};

/**
 * 判断当前主机URL是否匹配特定环境
 * @param {string} hostUrl - 当前页面的主机URL
 * @param {string} environment - 要匹配的环境类型 (ENVS.LOCAL, ENVS.SANDBOX等)
 * @returns {boolean} - 如果匹配则返回 true
 */
const isEnv = (hostUrl, environment) => {
  const matchers = ENV_MATCHERS[environment];
  if (!matchers) {
    throw new Error(`Critical: No matchers defined for environment: ${environment}`);
  }
  return matchers.some((match) => hostUrl.includes(match));
};

/**
 * 根据主机URL初始化当前环境
 * @param {string} host - 当前页面的主机URL
 * @returns {string} - 初始化的环境类型
 */
const initEnv = (host) => {
  if (isEnv(host, ENVS.LOCAL)) {
    // Environment.current = Environments.Local; // 如果有Local环境，取消注释
    return ENVS.LOCAL;
  }
  if (isEnv(host, ENVS.SANDBOX)) {
    Environment.current = Environments.Sandbox;
    return ENVS.SANDBOX;
  }
  Environment.current = Environments.Prod;
  return ENVS.PROD;
};

/**
 * 重新加载环境配置，可根据传入的env参数或当前浏览器主机名
 * @param {string} [env=''] - 可选参数，指定要切换到的环境名称 ("sandbox", "prod")
 */
const reloadEnvironmentConfig = (env = '') => {
  // 如果提供了env参数，则根据参数设置环境
  if (env === ENVS.SANDBOX) {
    Environment.current = Environments.Sandbox;
  } else if (env === ENVS.PROD) {
    Environment.current = Environments.Prod;
  } else {
    // 否则，根据当前浏览器主机名自动检测
    initEnv(window.location.host);
  }
};

// 应用启动时自动加载一次环境配置
reloadEnvironmentConfig();

export { Environment, reloadEnvironmentConfig };

// App.js 或您的组件文件
import React from "react";
import { Switch, Text } from '@chakra-ui/react'; // 假设您使用Chakra UI
import { Environment, reloadEnvironmentConfig } from "./environment"; // 导入环境配置

function App() {
  // 使用useState来存储和显示当前环境的名称
  const [currentEnvName, setCurrentEnvName] = React.useState(Environment.current.name);

  // 处理切换开关的改变事件
  const handleToggleChange = () => {
    // 根据当前环境名称判断要切换到哪个环境
    const newEnv = currentEnvName === "Sandbox" ? "prod" : "sandbox";

    // 调用reloadEnvironmentConfig函数切换环境
    reloadEnvironmentConfig(newEnv);

    // 更新UI中的环境名称
    setCurrentEnvName(Environment.current.name);
  };

  return (
    <div style={{ padding: '20px' }}>
      <p>当前环境: {currentEnvName}</p>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
        <Text fontSize={15} mr={2}>
          {currentEnvName === "Sandbox" ? "沙盒模式" : "生产模式"}
        </Text>
        <Switch 
          isChecked={currentEnvName === "Sandbox"} // 根据当前环境设置开关状态
          onChange={handleToggleChange} 
        />
      </div>

      {/* 这里可以放置其他组件和API调用，它们将使用当前激活的环境 */}
      {/* <CustomerList /> */}
    </div>
  );
}

export default App;

// api.js
import axios from 'axios'; // 假设您使用axios进行API请求
import { Environment } from "./environment"; // 导入环境配置

export class Api {
  /**
   * 根据当前环境获取基础URL
   * @returns {string} - 完整的基础URL (apiHost + apiBase)
   */
  static getBaseUrl() {
    const { apiHost, apiBase } = Environment.current;
    return (apiHost || '') + (apiBase || '');
  }

  /**
   * 发送GET请求
   * @param {string} path - API路径，例如 "/customer/paginate-customer"
   * @param {object} config - axios请求配置
   * @returns {Promise} - axios响应Promise
   */
  static get(path, config) {
    const url = Api.getBaseUrl() + path;
    return axios.get(url, config);
  }

  // 您可以根据需要添加其他HTTP方法，例如post, put, delete
  // static post(path, data, config) {
  //   const url = Api.getBaseUrl() + path;
  //   return axios.post(url, data, config);
  // }
}

// customerService.js (或您的API服务文件)
import { Api } from "./api"; // 导入API抽象类

const getAllCustomers = async (rows, page, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };

  // 使用Api.get方法，无需再手动拼接基础URL
  const response = await Api.get(
    `/customer/paginate-customer?page=${page}&rows=${rows}`,
    config
  );
  return response.data;
};

// 导出您的API服务函数
export { getAllCustomers };