2017-03-20 7 views
0

私はペットプロジェクトのためにauth0を検討していました。私は自分のアプリケーションの認証と、ウェブサイトで提供されているドキュメントとステップバイステップガイドの助けを借りて認証を設定することができました。次のステップではauth0からプロファイルを取得していましたが、それも成功しましたが、問題はプロファイルIDを使用してローカルDBからユーザーデータを取得する必要があるときでした。 getUserProfile()が非同期であるため、プロファイルを取得するには、ローカルストレージに設定して<Home/>コンポーネントにキャッチした後、ヘルパークラスのイベントエミッタを起動することをおすすめします。私はそれを避けるために別の回避策を試みてきましたが、何も動作していません。私は一日中これをやってみました。助けてください。関連するコードをここに添付します。プロファイルとEventsEmitterを取得する際のReactJSとAuth0の問題

import Auth0Lock from 'auth0-lock' 
    import { 
     isTokenExpired 
    } 
    from './jwtHelper' 
    import { 
     EventEmitter 
    } 
    from 'events' 

    export default class AuthService extends EventEmitter { 
     constructor(clientId, domain) { 
      // Configure Auth0 
      this.lock = new Auth0Lock(clientId, domain, { 

        autoclose: true, 
        theme: { 
         logo: logo, 
         primaryColor: "#337ab7" 
        }, 
        languageDictionary: { 
         title: "PHA" 
        }, 
        auth: { 
         redirect: false, 
         responseType: 'token' 
        } 
       }) 
       // Add callback for lock `authenticated` event 
      this.lock.on('authenticated', this._doAuthentication.bind(this)) 
       // binds login functions to keep this context 
      this.login = this.login.bind(this) 

     } 

     _doAuthentication(authResult) { 
      // Saves the user token 
      this.setToken(authResult.idToken) 
       // navigate to the home route 
      browserHistory.replace('/home') 
      this.lock.getUserInfo(authResult.accessToken, function(error, profile) { 
       if (error) { 
        console.log('Error loading the Profile - AuthService', error) 
       } else { 
        console.log("got", profile.name); 
        localStorage.setItem('profile', JSON.stringify(profile)) 
        this.emit('profile_updated', profile) 
       } 
      }) 
     } 
     getProfile() { 
      // Retrieves the profile data from local storage 
      const profile = localStorage.getItem('profile') 
      return profile ? JSON.parse(localStorage.profile) : {} 
     } 
    } 

のAuthServiceヘルパークラスはまた、私はEventsEmitterが使用されることはありませんコンソールでエラーが発生します。私が間違っているのは何ですか?

これは私のホームコンポーネントです。

class Homecontent extends React.Component{ 
static contextTypes = { 
    router : React.PropTypes.object 
    } 
static propTypes = { 
    auth: React.PropTypes.instanceOf(AuthService) 
    } 
constructor(props,context){ 

super(props); 
this.state={ 
    profile: {}, 
    user : "", 
    avatar: placeholder, 
    family: [], 
    nextappt: "0", 
    diagnosis: [], 
    medication:[], 
    advise:[], 
    tests:[], 
    mainchartdata:[], 
    piechartdata:[], 
    filtertext: "", 
    filtersource:"", 
} 
this.filtercallback= this.filtercallback.bind(this); 
props.auth.on('profile_updated', (newProfile) => { 
     console.log("updated profile"); 
     this.setState({profile: newProfile}) 
    }) 
} 

以下のコードが含まれているとアプリケーションが動作しません。

props.auth.on('profile_updated', (newProfile) => { 
     this.setState({profile: newProfile}) 
    }) 

明らかにEventsEmitterまたはthis.emit()に問題があります。

助けてください。 } `

+0

最初のエラーは明白ではありませんか? AuthServiceヘルパーでEventEmitterを使用することは決してありません。ちょうどEventEmitterのためのテキスト検索をしなさい、あなたがするのはすべてインポートです。 [docs](https://nodejs.org/api/events.html#events_events)のイベントエミッタの初期化を参照してください – daft300punk

+0

Ah。もう一度問題がありました。今私はEventEmitterからAuthServiceクラスを拡張しました。それでも、イベントエミッタは機能しません。私は何が欠けていますか? – Arvind

+0

あなたはまだ同じエラーが発生していますか? EventsEmitterは決して使用されませんでしたか? – daft300punk

答えて

1

私はEventEmitterクラスを拡張していないことが分かりました。この小さな間違いは私に多くの時間を要した。レッスンは学んだ、決してあなたの方法をハックしようとしないでください。常に問題の要点を攻撃してください。私と同じ間違いをしている人は、EventEmitterからクラスを継承してイベントを聞いてください。

イベントを発生させるすべてのオブジェクトは、EventEmitterクラスのインスタンスです。

Nodejsドキュメント

編集^言う:1 - 別の問題もありました。 this.emit()は、do_Authentication()メソッドでは異なるコンテキストを持っていました。悪名高いのvar that = thisthat.emit()私の問題を解決しました。

関連する問題