MsalProvider动态配置msal config：子组件能否更新msalConfig？

不可以直接在子组件中更新已经初始化的PublicClientApplication实例的msalConfig，PublicClientApplication实例一旦创建完成，clientId这类核心身份配置就处于只读状态，MsalProvider也没有提供动态更新底层实例配置的官方API，强行修改已创建实例的配置会导致内部登录态、token缓存等状态错乱，引发未知异常。

可以采用以下两种方案实现动态clientId配置：

把MsalProvider从入口文件移到上层逻辑组件中，等拿到应用层的clientId后，再实例化PublicClientApplication并渲染MsalProvider：

1. 新增一个上层包裹组件处理配置加载逻辑：

// Wrapper.js
import { useState, useEffect } from 'react';
import { PublicClientApplication, MsalProvider } from '@azure/msal-react';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

const Wrapper = () => {
  const [msalInstance, setMsalInstance] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 替换为你从应用层获取clientId的逻辑，比如接口请求、读取全局配置等
    const fetchClientConfig = async () => {
      const clientId = await getClientIdFromAppLayer();
      const msalConfig = {
        auth: {
          clientId: clientId,
          // 补充其余必填配置，比如authority、redirectUri等
        }
      };
      setMsalInstance(new PublicClientApplication(msalConfig));
      setLoading(false);
    };
    fetchClientConfig();
  }, []);

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

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

export default Wrapper;

2. 修改入口文件index.js：

// index.js
ReactDOM.render(
  <Provider store={store}>
    <Wrapper />
  </Provider>,
  document.getElementById("root")
);

如果业务需要运行时切换clientId，可以通过给MsalProvider绑定key属性，触发旧实例销毁、新实例创建，实现配置更新：

const App = () => {
  const [currentClientId, setCurrentClientId] = useState(null);
  // 省略获取/更新clientId的业务逻辑

  const msalInstance = useMemo(() => {
    if (!currentClientId) return null;
    return new PublicClientApplication({
      auth: {
        clientId: currentClientId,
        // 其余配置
      }
    });
  }, [currentClientId]);

  if (!msalInstance) return <div>加载中</div>;

  return (
    <MsalProvider instance={msalInstance} key={currentClientId}>
      {/* 子组件内容 */}
    </MsalProvider>
  )
}

注意：不要尝试直接修改已实例化的PublicClientApplication的config属性，这类修改不会生效，还会导致登录态异常、token获取失败等问题。

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