2017-12-06 22 views
2

Auth0にリダイレクトhttp://localhost:3000/callback#/acccess-token=dxyAuth0が私のコールバックルートを見つけられないのはなぜですか?

リアクションアプリで空白の画面が表示されます。

相続人は私の主なapp.js

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

私の主は、私のroutes.jsコンポーネントが含まれています。 auth0の

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;

相続人は私のinit

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

Iバック/コールバックにauth0からリダイレクトされるまで、すべてが正常に動作します。単に画面/ルートを見つけられず、何もレンダリングしません。

コンソールのスクリーンショット。 /コールバックブレークポイントは決してヒットしません。任意の助け

enter image description here

おかげで、私は無駄にドキュメントと回答を通過してきました。

答えて

0

私はあなたがAuth0フロントエンドのクライアント設定であなたを前提としています>コールバックURiをhttp://localhost:3000/callbackとして追加して保存しました。

さらに、callback.htmlファイルにトークンが正しく認証されたら、何かを表示するためのタグを追加しました。

すべて問題なく、まだ空白のエラーが表示される場合。あなたのコンソールスクリーンショットを投稿してください。

+0

はい、コールバックURIを保存しました。それは私のURIを/ callbackに変更しています。そして、私はローディングスピナーを持っています。また、私はマウントされたメソッドにコンソールログを追加しましたが、決してログに記録されません。私は上記の写真を追加 –

関連する問題