0

我正在Auth0 Lock 11我的反应应用程序中实施。该应用程序也在使用Redux和react-router-dom。

我正在尝试遵循此处的文档，但无法正确初始化Lock。我也对如何检查用户是否经过身份验证感到困惑。在我使用之前Lock v9，事情似乎更直观。

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

  • Public除组件外，所有应用程序都将受到保护
  • 如果用户尝试访问受保护的部分，我将Redirect用户Public

这是我到目前为止所拥有的。这个文件是我保存所有Auth0代码的地方：

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()
    }
}

所以，这是我的问题：

  1. 我在哪里初始化Lock？在App.js?
  2. 如果用户未通过身份验证，他将被重定向到Public组件。我如何访问该login()功能Public？我知道我可以简单地在组件中引用它，但是不会重新初始化Lock吗？
4

1 回答 1

1

对于这种情况，我首选的方法是将 App 组件包装在提供 AuthContext 的 AuthWrapper 组件中。像这样的东西：

import Auth from "./Auth"

const AuthContext = React.createContext({})

class AuthWrapper extends React.Component {
  constructor(props) {
    super(props)
    this.auth = new Auth()
  }

  login = () => {
    this.auth.login()
  }

  render() {
    return (
      <AuthContext.Provider value={{ login: this.login }}>
        {this.props.children}
      </AuthContext.Provider>
    )
  }
}

const SomeComponent = () => {
  const { login } = useContext(AuthContext)
  return <button onClick={login}>Show Auth</button>
}

如果不清楚，请告诉我。

于 2019-12-18T17:09:08.407 回答