javascript - 在单页 Web 应用程序中第二次初始化 Okta Signin Widget 会抛出异常

Question

我们正在整合 Okta Sign-in Widget进入我们基于 React 的网络应用程序。

The example snippet :

var oktaSignIn = new OktaSignIn({baseUrl: baseUrl});
oktaSignIn.renderEl(...)

第一次呈现小部件时对我们来说工作正常，但在用户登录并再次注销后，webapp 第二次呈现登录组件并尝试执行 renderEl再次呈现小部件。这会导致抛出以下异常:

Backbone.history has already been started

我创建了 this jsfiddle来证明问题。它只是实例化一个登录小部件两次(等待后第二次)。可以看到第二次调用导致异常抛出。

https://jsfiddle.net/nudwcroo/6/

目前我的解决方法是在转到登录组件时重新加载整个 Web 应用程序，但这对于单页应用程序来说是不可取的。

这是一个已知问题吗？有什么方法可以在单个 javascript session 中两次初始化登录小部件？

Answer 1

由于小部件每页只能实例化一次，因此最好为所有单页应用程序隐藏/显示该元素。

<div id="okta-login-container"></div>

<script type="text/javascript">
    var oktaSignIn = new OktaSignIn(/* config */);

    oktaSignIn.renderEl(
      { el: '#okta-login-container' },
      function (res) {
        if (res.status === 'SUCCESS') {
            // Hide element 
            $("#okta-login-container").hide();
        }
      }
    );
</script>

当您创建logout() 函数时，请确保show() 元素而不是再次渲染它。

function logout() {
    $('#okta-login-container').show();
    // Do more logic
}