React中实现MSAL从JSON文件运行时动态加载配置的方法

1. 迁移配置文件到public目录 #

把原config.json移动到项目的public文件夹下，这个目录下的文件不会被打包进JS bundle，构建后可直接修改。

2. 改造authConfig.ts为异步加载逻辑 #

不再导出静态常量，改为导出异步函数来动态获取配置并生成MSAL配置对象：

// authConfig.ts
import { Configuration } from '@azure/msal-browser';

export async function getMsalConfig(): Promise<Configuration> {
  // 从public目录拉取配置文件
  const response = await fetch('/config.json');
  if (!response.ok) {
    throw new Error('加载认证配置失败');
  }
  const config = await response.json();

  return {
    auth: {
      clientId: config.clientId,
      authority: `https://login.microsoftonline.com/${config.tenantId}`,
      redirectUri: '/', // 也可从config.json中读取，按需调整
      postLogoutRedirectUri: '/'
    },
    cache: {
      cacheLocation: 'sessionStorage',
      storeAuthStateInCookie: false
    }
  };
}

3. 在应用入口等待配置加载后初始化MSAL #

在index.tsx（或根组件文件）中，先完成配置加载，再渲染MSAL Provider和应用内容：

// index.tsx
import React, { useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import { PublicClientApplication } from '@azure/msal-browser';
import { MsalProvider } from '@azure/msal-react';
import { getMsalConfig } from './authConfig';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

function AppWrapper() {
  const [msalInstance, setMsalInstance] = useState<PublicClientApplication | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    const initMsal = async () => {
      try {
        const config = await getMsalConfig();
        const instance = new PublicClientApplication(config);
        setMsalInstance(instance);
      } catch (err) {
        setError(err instanceof Error ? err.message : '初始化MSAL失败');
      } finally {
        setLoading(false);
      }
    };

    initMsal();
  }, []);

  if (loading) {
    return <div>加载认证配置中...</div>;
  }

  if (error) {
    return <div>认证配置加载错误：{error}</div>;
  }

  return (
    <MsalProvider instance={msalInstance!}>
      <App />
    </MsalProvider>
  );
}

root.render(<AppWrapper />);

4. 构建后修改配置的方式 #

项目构建完成后，直接修改build目录下的config.json文件，重启应用后即可加载新配置，无需重新构建。

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