为啥我的 Auth0 在反应中找不到我的回调路由？

Posted 2023-03-08

【中文标题】为啥我的 Auth0 在反应中找不到我的回调路由？

【英文标题】：Why wont my Auth0 find my callback route in react?为什么我的 Auth0 在反应中找不到我的回调路由？

【发布时间】：2018-05-20 23:35:26

【问题描述】：

Auth0 重定向到http://localhost:3000/callback#/acccess-token=dxy

我的 react 应用程序出现空白屏幕。

这是我的主要 app.js

render((
    <HashRouter>
        <Main />        
    </HashRouter>
), $('#app')[0]);

我的 main 包含我的 routes.js 组件。

class Routes extends Component 
    constructor(props, context) 
        super(props, context);

        this.state =  mainData: this.props.mainData ;

        this.handleAuthentication = this.handleAuthentication.bind(this)
    

    componentWillReceiveProps(newProps) 
        this.setState((previousState) => update(previousState, 
            mainData:  $set: newProps.mainData ,
        ));
    

    handleAuthentication(nextState, replace) 
        if (/access_token|id_token|error/.test(nextState.location.hash)) 
            this.props.auth.handleAuthentication();
        
    

    render() 
        return (
            <div>
          

                <Switch>

                  <Route path='/callback' render=props => 

                    this.handleAuthentication(props);

                    return <Callback ...props />
                 />
 
                    <Route exact path='/' render=props => (
                        <Dashboard changeAppBar=this.props.changeAppBar userProfile=this.state.mainData.userProfile windowHeight=this.props.wh windowWidth=this.props.ww />)
                    />

                    <Route path='/settings' render=props => (
                        <Settings changeAppBar=this.props.changeAppBar userProfile=this.state.mainData.userProfile />)
                    />





                </Switch>


            </div>
        );
    


export default Routes;

这是我的 auth0 初始化

    this.auth0 = new auth0.WebAuth(
      clientID: 'oiEjW4Mf6Ju4BvRfHeuObQnMbghKs38g',
      domain: 'cryptok1ng.auth0.com',
      responseType: 'token id_token',
      redirectUri: 'http://localhost:3000/callback'
    )

一切正常，直到我从 auth0 重定向回 /callback。根本没有找到屏幕/路线并且什么都不渲染。

控制台的屏幕截图。 /callback 断点永远不会被命中。

感谢我浏览文档和答案无济于事的任何帮助。

【参考方案1】：

我假设您在 Auth0 前端客户端配置中> 您已将回调 URi 添加为 http://localhost:3000/callback 并保存它。

而且在您的 callback.html 文件中，您添加了一些标签，以便在正确验证令牌后显示某些内容。

如果一切正常，您仍然会收到空白错误。请发布您的控制台屏幕截图以查看。

【讨论】：

是的，保存了回调 uri，它正在将我的 uri 更改为 /callback。是的，我有一个加载微调器。我还向我的挂载方法添加了控制台日志记录，它从不记录。我在上面添加了一张图片