小编s_k*_*iok的帖子

我正在使用 webpack 模块联合插件，并且有容器和微前端应用程序（两者都是在 React 上编写的）。根据新的要求，我应该使用第三方服务 Auth0 和@auth0/auth0-react包来实现身份验证逻辑。

该包使用上下文和提供程序在组件树之间共享数据（用户信息、令牌等），因此我使用身份验证提供程序包装了我的容器应用程序：

<Auth0Provider
  domain={domain}
  clientId={clientId}
  redirectUri={window.location.origin}
  onRedirectCallback={onRedirectCallback}
>
  {children}
</Auth0Provider>

要访问组件树中任何位置的身份验证数据，我们可以使用useAuth0钩子：

  import { useAuth0 } from '@auth0/auth0-react';
  const {
    isLoading,
    isAuthenticated,
    error,
    user,
    loginWithRedirect,
    logout,
  } = useAuth0();

现在，我陷入困境，如何访问微前端中的最新身份验证数据/上下文？注意：容器应用程序的身份验证上下文将异步更新（在“/token”请求完成后）

AuthProvider根据我的尝试，与我的微前端共享为服务：

容器应用程序webpack 配置：

name: 'container',
exposes: {
  './App': './src/App',
  './AuthenticationProvider': './src/AuthenticationProvider',
},

微前端应用程序webpack 配置：

remotes: {
  container: 'container@http://localhost:8080/remoteEntry.js',
},

然后 import { AuthenticationProvider } from 'container/AuthenticationProvider'; 在我的微前端应用程序中。

当然，它不会按预期工作，最新数据将仅在容器应用程序中。 …

我在 React 组件内部有一个基于服务器响应的变量，该变量可以位于 prop.prop 或 prop 中。我怎样才能正确地解构这个案子？

 const { myVar } = prop.prop || prop