Question

我陷入了奇怪的错误。我正在努力保护我的客户端路线。我有这个代码

<Router history={history} component={App}>
          <div>


            <Route path="/login" render={(props) => <Login auth={auth} {...props} />} />
            <Route path="/apphome" render={(props) => <Apphome auth={auth} {...props} />} />
            <Route path="/apphome" render={(props) => (
                  !auth.isAuthenticated() ? (
                    <Redirect to="/login"/>
                  ) : (
                    <Apphome auth={auth} {...props} />
                  )
                )} />
            <Route path="/contacts" exact component ={Contacts} />
            <Route path="/mytodo" exact component ={Mytodo} />
            <Route path="/favorites" exact component ={Favorites} />
            <Route path="/mention" exact component ={Mention} />
            <Route path="/profile" exact component ={Profile} />
            <Route path="/buy" exact component ={Buy} />
            <Route path="/success" exact component ={Success} />
            <Route path="/cancel" exact component ={Cancel} />

          </div>
        </Router>

现在，我进入登录页面，登录，然后返回登录页面。但是，当我不保护这条路线时，我没有保护它像

它完美运行，登录后，我去了这个Apphome组件。

我正在使用react.js和auth0。这有什么问题？

提前致谢

Answer 1

Auth0允许您指定一个回调路由，该路由将在您通过身份验证后调用。登录到auth0.com并列出您希望调用的回调路由。 https://manage.auth0.com/#/applications

然后在您的代码中，您需要定义路线：

<Route
    path="/callback"
    render={props => {
        handleAuthentication(props);
        return <Loading />;
    }}
/>

在handleAuthentication函数中，在验证凭据后将用户重定向到任何页面：

handleAuthentication() {
    this.auth0.parseHash((err, authResult) => {
        if (authResult && authResult.accessToken && authResult.idToken) {
            this.setSession(authResult);
            this.history.replace("/");
        } else if (err) {
            this.history.replace("/auth/failed");
        }
    });
}

现在，在auth0完成身份验证后，它应该触发你的回调。例如，在dev：http://localhost:3000/callback上。这应该会激活你的handleAuthentication函数。

auth0 - 在身份验证后重定向到/ login

1 个答案: