Reactjs 在react应用程序中初始化Auth0锁的位置

我正在react应用程序中实现

Auth0

Lock 11

。该应用程序还使用了

Redux

和

react-router-dom

我试图按照文档进行操作，但在正确初始化

锁时遇到问题。我还对如何检查用户是否经过身份验证感到困惑。在我使用
lockv9
之前，事情似乎更直观

我试图实现的一般行为是：


除<代码>公共组件外，所有应用程序都将受到保护
如果用户试图访问受保护的部分，我将
将用户重定向到
公共


这是我到目前为止所拥有的。此文件是我保存所有
Auth0
code:

import Auth0Lock from 'auth0-lock';

export default class Auth { 

    lock = new Auth0Lock('my_client_id', 'mydomain.auth0.com', {

            auth: {
                audience: 'https://myapi.com',
                redirectUrl: 'http://localhost:3000',
                responseType: 'token id_token',
                params: {
                    scope: 'openid email profile'
                }
            }
        }
    ).on('authenticated', function(authResult) {

        if (authResult && authResult.accessToken && authResult.idToken) {
            this.setSession(authResult);
            // use authResult.idTokenPayload for profile information
        }
    });

    setSession(authResult) {

        debugger
    }

    login() {

        this.lock.show()
    }
}

因此，以下是我的问题：

在哪里初始化
锁
？在
App.js
中
如果用户未通过身份验证，他将被重定向到
Public
组件。如何从
Public
访问
login（）
函数？我知道我可以简单地在组件中引用它，但这不会重新初始化
锁
对于这种情况，我的首选方法是将应用程序组件包装在提供AuthContext的AuthWrapper组件中。大概是这样的：

从“/Auth”导入身份验证
const AuthContext=React.createContext（{}）
类AuthWrapper扩展了React.Component{
建造师（道具）{
超级（道具）
this.auth=new auth（）
}
登录=（）=>{
this.auth.login（）
}
render（）{
返回(
{this.props.children}
)
}
}
常量SomeComponent=（）=>{
const{login}=useContext（AuthContext）
返回显示验证
}

如果不清楚，请告诉我。
因此，如果我理解正确，请首先创建一个可以访问所有
Auth0
代码的组件，然后在那里初始化它。然后将此组件包装在
App.js
周围，对吗？你实际上是在创建一个
提供者
，对吗？@Sam yes！在我的示例中，
Auth
表面上就是您在问题中共享的Auth类。
AuthWrapper
组件实际上只是用来保存对它的引用，以便在不使用全局作用域的情况下使用React。谢谢！这是有道理的。我现在遇到的唯一问题是，在输入用户名和密码并从
Auth0
获取
access\u令牌之后，我没有点击
锁。在（'authenticated'…）
@Sam上，我以前没有实现过Auth0，因此我不熟悉那里可能发生的情况。如果您需要帮助，最好针对该问题提出一个新问题。