实现前端应用沙盒与生产环境动态切换及API管理

// 定义环境枚举，方便引用
const ENVS = {
  LOCAL: "local",
  SANDBOX: "sandbox",
  PROD: "prod",
};

// 定义不同环境的具体配置
const Environments = {
  Sandbox: {
    name: "Sandbox",
    env: ENVS.SANDBOX,
    apiHost: "http://156.21.190.78", // 沙盒环境API主机
    apiBase: "/api/v1",
  },
  Prod: {
    name: "Production",
    env: ENVS.PROD,
    apiHost: "http://156.23.190.78", // 生产环境API主机
    apiBase: "/api/v1",
  },
  // 可以根据需要添加更多环境，例如 Local
  // Local: {
  //   name: "Local",
  //   env: ENVS.LOCAL,
  //   apiHost: "http://localhost:8000",
  //   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 中的键)
 * @returns {boolean} - 如果匹配则返回 true
 */
const isEnv = (hostUrl, environment) => {
  const matchers = ENV_MATCHERS[environment];
  if (!matchers) {
    // 某些环境可能没有匹配器，例如生产环境通常是默认值
    return false;
  }
  return matchers.some((match) => hostUrl.includes(match));
};

/**
 * 根据主机字符串初始化当前环境
 * @param {string} host - 用于判断环境的主机字符串
 * @returns {string} - 初始化后的环境名称 (ENVS 中的键)
 */
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;
};

/**
 * 重新加载环境配置，可传入指定环境字符串进行切换
 * @param {string} [envHostString=''] - 可选参数，模拟一个主机字符串来强制切换环境
 */
const reloadEnvironmentConfig = (envHostString = '') =>
  initEnv(envHostString || window.location.host); // 如果未指定，则使用当前浏览器主机名

// 页面加载时立即初始化环境
reloadEnvironmentConfig();

export { Environment, reloadEnvironmentConfig };

import React from "react";
import { Switch, Text, Flex, Button } from "@chakra-ui/react"; // 假设使用Chakra UI
import { Environment, reloadEnvironmentConfig } from "./environment"; // 导入环境管理模块

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

  // 根据当前环境名称判断Switch的选中状态
  const isSandboxMode = currentEnvName === Environments.Sandbox.name;

  const handleModeToggle = () => {
    // 根据当前环境，决定切换到沙盒还是生产
    const targetEnvString = isSandboxMode ? Environments.Prod.env : Environments.Sandbox.env;

    // 调用reloadEnvironmentConfig来更新全局环境配置
    // 注意：这里传入的是 env 字段 (如 "sandbox" 或 "prod")，它会作为 initEnv 的 host 参数进行匹配
    reloadEnvironmentConfig(targetEnvString); 

    // 更新组件状态以反映新的环境名称
    setCurrentEnvName(Environment.current.name);
  };

  return (
    <Flex align="center" p={4}>
      <Text fontSize={15} mr={2}>
        {currentEnvName === Environments.Sandbox.name ? "Sandbox" : "Production"}
      </Text>
      <Switch 
        isChecked={isSandboxMode} 
        onChange={handleModeToggle} 
      />
      {/* 可以在这里显示其他基于环境的内容 */}
      <Text ml={4}>当前API主机: {Environment.current.apiHost}</Text>
      <Button ml={4} onClick={handleModeToggle}>
        切换环境
      </Button>
    </Flex>
  );
}

export default App;

import axios from "axios"; // 假设您使用axios进行HTTP请求
import { Environment } from "./environment"; // 导入环境管理模块

export class Api {
  /**
   * 获取当前环境的完整API基础URL
   * @returns {string} 完整的API基础URL
   */
  static getBaseUrl() {
    const currentEnv = Environment.current;
    if (!currentEnv || !currentEnv.apiHost || !currentEnv.apiBase) {
      console.error("环境配置不完整或未初始化！");
      // 可以抛出错误或返回默认值
      return ""; 
    }
    return `${currentEnv.apiHost}${currentEnv.apiBase}`;
  }

  /**
   * 发送GET请求
   * @param {string} url - 相对路径URL
   * @param {object} config - axios请求配置
   * @returns {Promise<any>} - axios响应的Promise
   */
  static get(url, config) {
    const fullUrl = `${Api.getBaseUrl()}${url}`;
    return axios.get(fullUrl, config);
  }

  /**
   * 发送POST请求
   * @param {string} url - 相对路径URL
   * @param {object} data - 请求体数据
   * @param {object} config - axios请求配置
   * @returns {Promise<any>} - axios响应的Promise
   */
  static post(url, data, config) {
    const fullUrl = `${Api.getBaseUrl()}${url}`;
    return axios.post(fullUrl, data, config);
  }

  // 可以根据需要添加 put, delete 等其他HTTP方法
}

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;
};