前端应用中沙盒与生产环境切换及API动态管理教程

// environment.js
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: {
  //   name: "Local",
  //   env: ENVS.LOCAL,
  //   apiHost: "http://localhost:8000",
  //   apiBase: "/api/v1",
  // },
};

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

// 用于匹配主机名的规则，以便根据URL自动识别环境
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} - 是否匹配
 */
const isEnv = (hostUrl, environment) => {
  const matchers = ENV_MATCHERS[environment];
  if (!matchers) {
    console.warn(`Critical: No matchers defined for environment: ${environment}`);
    return false;
  }
  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;
};

/**
 * 重新加载环境配置
 * @param {string} [envParam=''] - 强制指定环境，例如 'sandbox' 或 'production'
 */
const reloadEnvironmentConfig = (envParam = '') => {
  let targetEnv = envParam;
  if (envParam === 'Production') { // 处理UI传入的名称与内部env名称不一致的情况
    targetEnv = ENVS.PROD;
  } else if (envParam === 'Sandbox') {
    targetEnv = ENVS.SANDBOX;
  }

  if (targetEnv === ENVS.SANDBOX) {
    Environment.current = Environments.Sandbox;
  } else if (targetEnv === ENVS.PROD) {
    Environment.current = Environments.Prod;
  } else {
    // 如果没有指定envParam，则根据当前window.location.host自动初始化
    initEnv(window.location.host);
  }
};

// 页面加载时自动初始化环境
reloadEnvironmentConfig();

export { Environment, reloadEnvironmentConfig, ENVS, Environments };

// App.js 或您的Dashboard组件
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 handleModeToggle = () => {
    const newEnvName = currentEnvName === "Sandbox" ? "Production" : "Sandbox";
    // 调用reloadEnvironmentConfig来更新全局Environment.current
    reloadEnvironmentConfig(newEnvName);
    // 更新组件状态以反映新的模式名称
    setCurrentEnvName(Environment.current.name);
  };

  return (
    <div style={{ padding: '20px' }}>
      <p>当前环境: <strong>{currentEnvName}</strong></p>
      <div style={{ display: 'flex', alignItems: 'center', marginTop: '10px' }}>
        <Text fontSize={15} mr={2}>
          {currentEnvName}
        </Text>
        <Switch 
          isChecked={currentEnvName === "Sandbox"} // 根据当前环境设置开关状态
          onChange={handleModeToggle} 
        />
      </div>
      {/* 其他应用内容，会根据当前环境调用正确的API */}
    </div>
  );
}

export default App;

// api.js
import axios from "axios";
import { Environment } from "./environment"; // 导入环境模块

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

  /**
   * 发送GET请求
   * @param {string} url - 请求路径（不包含基础URL）
   * @param {object} config - axios请求配置
   * @returns {Promise} - axios响应Promise
   */
  static get(url, config) {
    const fullUrl = Api.getBaseUrl() + url;
    return axios.get(fullUrl, config);
  }

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

  // ... 其他方法
}

// services/customerService.js
import { Api } from "./api"; // 导入Api类

const getAllCustomers = async (rows, page, token) => {
  const config = {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  };
  // 使用Api.get，它会自动根据当前环境选择正确的API基地址
  const response = await Api.get(
    `/customer/paginate-customer?page=${page}&rows=${rows}`,
    config
  );
  return response.data;
};

// 导出函数以便在组件中使用
export { getAllCustomers };