使用模块联合插件 - 远程库在 shell 和微前端之间共享 AuthService 数据

Question

我的 shell 和微前端有单独的存储库，我想在 shell 和微前端之间共享身份验证服务数据。

我使用下面的文章“第 5 步：共享 Monorepo 的库”来创建 AuthService 共享库，但由于我的不是 Monorepo，所以我将该库发布到 npm 中：

https://github.com/angular-architects/module-federation-plugin/blob/12.0.0/libs/mf/tutorial/tutorial.md

我的 AuthLibrary 的 npm：https://www.npmjs.com/package/@vijender1256/auth-lib

我将 npm 包安装到我的 shell 和微前端中。我正在 shell 应用程序中设置登录值，并希望在多个微前端中共享用户信息，我想使用此库进行跨 shell 和微前端的 AuthService 状态管理。

shell webpack.config.js

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' }),
    ...sharedMappings.getDescriptors()
  },
  sharedMappings: ['@vijender1256/auth-lib'],
});

微前端 webpack.config.js：

const { shareAll, withModuleFederationPlugin } = require('@angular-architects/module-federation/webpack');

module.exports = withModuleFederationPlugin({

  name: 'itemMfe',

  exposes: {
    './ItemModule': './src/app/item/item.module.ts'
  },

  shared: {
    ...shareAll({ singleton: true, strictVersion: true, eager: true, requiredVersion: 'auto' }),
    ...sharedMappings.getDescriptors()
  },
  sharedMappings: ['@vijender1256/auth-lib'],
});

当我在 shell 中设置值时，我没有在微前端中获取该值，而是再次实例化 AuthService，并且我丢失了在 Shell 中设置的用户数据。

我查看了我的网络，我没有看到我的库最初加载，但是当我获得微前端时，它加载了库，但它没有用，我无法将用户数据从 shell 共享到微前端。

有什么建议可以分享状态吗？