微前端应用间如何安全共享状态而不污染全局变量？

全局变量确实是个坑，尤其在微前端场景下，不同子应用可能互相干扰，甚至引发安全问题。针对你的需求，推荐使用一种更可控的方式：通过主应用维护一个共享状态管理器，并结合事件机制实现跨应用通信。

### 具体方案
1. **主应用创建共享状态管理器**
在主应用中创建一个独立的模块来管理共享状态，比如基于 Proxy 或者简单的对象封装。这样可以避免直接暴露到全局。

// mainApp/stateManager.js

const sharedState = {

  user: null,

};



const stateManager = {

  get(key) {

    return sharedState[key];

  },

  set(key, value) {

    sharedState[key] = value;

    this.emit('stateChanged', { key, value });

  },

  on(event, callback) {

    if (!this._callbacks) this._callbacks = {};

    (this._callbacks[event] = this._callbacks[event] || []).push(callback);

  },

  emit(event, data) {

    (this._callbacks[event] || []).forEach((cb) => cb(data));

  },

};



export default stateManager;

2. **暴露给子应用的安全接口**
不要直接把 stateManager 挂载到 window 上，可以通过 qiankun 的 registerMicroApp 方法，在加载子应用时传递共享实例。

// mainApp/entry.js

import stateManager from './stateManager';



qiankun.start({

  registerMicroApp(name, loader, {

    props: {

      stateManager,

    },

  }),

});

3. **子应用订阅状态变化**
子应用通过接收到的 props.stateManager 来获取和更新状态，同时可以监听变化。

// subAppA/index.js

export function bootstrap(props) {

  const { stateManager } = props;



  // 监听状态变化

  stateManager.on('stateChanged', ({ key, value }) => {

    if (key === 'user') {

      console.log('User changed:', value);

    }

  });



  // 更新状态

  function login(user) {

    stateManager.set('user', user);

  }



  return { login };

}

4. **注意安全性**
- 确保 stateManager 只暴露必要的方法（如 get, set, on, emit），不要让子应用直接修改原始数据。
- 如果涉及敏感信息（如 token），考虑加密或权限校验后再存储。
- 避免子应用滥用 set 方法覆盖其他应用的状态，可以通过添加命名空间（如 stateManager.set('appA:user', {...})）来隔离。

5. **清理资源**
子应用卸载时记得移除监听器，防止内存泄漏。

export function unmount() {

     stateManager.off('stateChanged');

   }

这种方式既解决了全局变量污染问题，又保证了状态的安全性和实时性。希望对你有帮助！