对Auth0的lock.on('authenticated')事件进行调度操作

Question

我想在我的React/Redux应用程序中实现新的Auth0 Lock 10.

我在互联网上查了一下,但没有什么能与我的问题相符.有一个教程在这里,但是它使用了弹出模式,而不是重定向(默认现在)模式.另外一个解析URL,这是锁定10没用.

这是流程:

• 当我的应用程序启动时,Auth0Lock会被实例化
• 当用户单击登录按钮时,它会显示Lock小部件(lock.show())并调度LOGIN_REQUEST
• 该锁在auth0.com上进行身份验证(从我的localhost重定向)
• 成功登录后重定向回我的localhost,再次实例化Auth0Lock
• 我等待lock.on('authenticated')事件发送LOGIN_SUCCESS

这是我的actions/index.js代码:

import Auth0Lock from 'auth0-lock'

export const LOGIN_REQUEST = 'LOGIN_REQUEST'
export const LOGIN_SUCCESS = 'LOGIN_SUCCESS'
export const LOGIN_ERROR = 'LOGIN_ERROR'

function loginRequest() {
  return {
    type: LOGIN_REQUEST
  }
}

function loginSuccess(profile) {
  return {
    type: LOGIN_SUCCESS,
    profile
  }
}

function loginError(error) {
  return {
    type: LOGIN_ERROR,
    error
  }
}

// import AuthService to deal with all the actions related to auth
const lock = new Auth0Lock('secret', 'secret', {
  auth: {
    redirectUrl: 'http://localhost:3000/callback',
    responseType: 'token'
  }
})

lock.on('authenticated', authResult => {
  console.log('Im authenticated')
  return dispatch => {
    return dispatch(loginSuccess({}))
  }
})

lock.on('authorization_error', error => {
  return dispatch => dispatch(loginError(error))
})


export function login() {
  lock.show()
  return dispatch => {return dispatch(loginRequest())}
}

现在,当我点击登录按钮时,redux logger显示我调度了LOGIN_REQUEST动作,我看到了锁定小部件,我可以登录,它重定向到auth0.com然后回到我localhost:3000/callback的漂亮令牌.一切都很好,我Im authenticated在控制台中看到了消息,但redux logger没有告诉我已经调度了LOGIN_SUCCESS动作.

我是Redux的新手,我想我错过了一件事,但我无法抓住它.谢谢!

Answer 1

我最终放入 actions.js 中，创建了一个名为的新函数checkLogin()

// actions.js

const authService = new AuthService(process.env.AUTH0_CLIENT_ID, process.env.AUTH0_DOMAIN)

// Listen to authenticated event from AuthService and get the profile of the user
// Done on every page startup
export function checkLogin() {
  return (dispatch) => {
    // Add callback for lock's `authenticated` event
    authService.lock.on('authenticated', (authResult) => {
      authService.lock.getProfile(authResult.idToken, (error, profile) => {
        if (error)
          return dispatch(loginError(error))
        AuthService.setToken(authResult.idToken) // static method
        AuthService.setProfile(profile) // static method
        return dispatch(loginSuccess(profile))
      })
    })
    // Add callback for lock's `authorization_error` event
    authService.lock.on('authorization_error', (error) => dispatch(loginError(error)))
  }
}

在我的组件的构造函数中App，我称它为

import React from 'react'
import HeaderContainer from '../../containers/HeaderContainer'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.props.checkLogin() // check is Auth0 lock is authenticating after login callback
  }

  render() {
    return(
      <div>
        <HeaderContainer />
        {this.props.children}
      </div>
    )
  }
}

App.propTypes = {
  children: React.PropTypes.element.isRequired,
  checkLogin: React.PropTypes.func.isRequired
}

export default App

请参阅此处获取完整源代码：https ://github.com/amaurymartiny/react-redux-auth0-kit