Auth0 锁定组件未在带有容器选项的 React 中显示

Posted 2023-03-08

【中文标题】Auth0 锁定组件未在带有容器选项的 React 中显示

【英文标题】：Auth0 Lock Component not showing in React with container option

【发布时间】：2017-11-14 08:54:45

【问题描述】：

（使用 React）我有一个 /login 路由和一个 /signup 路由来显示 Login 和 SignUp 组件。在我的Login 组件中，我使用Auth0's Lock component 来显示登录表单，并且我还使用container configuration option 以使表单显示在我自己的div 中，而不是作为默认模式。

当我的Login 组件第一次加载时（或在刷新/login 路由之后），Auth0 Lock 组件会正确加载。 我的问题是，当我从 /login 路由导航到 /signup 路由，然后返回 /login 路由时，Auth0 Lock 组件根本没有加载。 检查页面时，我可以看到我的containerdiv是空的。

我发现 this issue on Auth0's github 其他人使用 Angular 遇到了同样的问题，但他们的解决方案是将 auth.config.auth0lib.$container 设置为 null，这似乎不是一个好的解决方案。

【参考方案1】：

查看auth0 Lock source后，我发现hide方法解决了我的问题：

hide() 
  closeLock(this.id, true);

在我的Login 组件中，我重写了componentWillUnmount 方法，获取对Auth0Lock 的引用，然后调用hide()：

componentWillUnmount() 
  this.lock.hide();

现在，当我从位于 /login 的 Login 组件导航到另一条路线，然后返回到 /login 时，Auth0 Lock 组件会重新加载并正确显示。