Question

所以，我正在为一个宠物项目探索auth0。我可以借助他们的文档和网站上提供的分步指南为我的应用程序配置身份验证。下一步是从auth0获取配置文件，它也是成功的，但问题是我必须使用配置文件ID从我的本地数据库中获取用户数据。由于getUserProfile()是异步的，因此获取配置文件的推荐方法是在将helper类设置为本地存储并在<Home/>组件中捕获它之后，在辅助类中触发eventemitter。我一直在尝试不同的解决方法来避免它，但没有任何工作。我整天试着这样做。请帮忙。我会在这里附上相关代码。

AuthService帮助程序类

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) : {}
      }
  }

此外，我在控制台中收到一条错误，表示从未使用过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})
    })
 }

当包含以下代码时，App不会运行。

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

很明显，EventsEmitter或this.emit（）会出现问题。

请帮忙。 }`

Answer 1

所以，事实证明我错过了扩展EventEmitter类。这个小错误花了我很多时间。经验教训，永远不要试图破解你的方式。总是攻击问题的关键。对于犯同样错误的人，只需从EventEmitter扩展您的课程以收听该事件。

发出事件的所有对象都是EventEmitter类的实例。

Nodejs文档说^

编辑：1 - 还有另一个问题。 this.emit()方法中do_Authentication()具有不同的上下文。臭名昭着的var that = this that.emit()解决了我的问题。

获取配置文件和EventsEmitter时出现ReactJS和Auth0问题

1 个答案: