对 Auth0 的 lock.on("已验证")事件调度操作

Question

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

我在网上查过了，但是没有一个符合我的问题。这里有一个教程，但它使用弹出模式而不是重定向(默认现在)模式。另一个解析url，这在锁10中是无用的。

流程如下:

• Auth0Lock在我的应用程序启动时被实例化
• 当用户点击登录按钮时，显示锁定小部件(lock.show())并调度LOGIN_REQUEST
• 锁在auth0.com上进行身份验证(从我的本地主机重定向)
• 登录成功后重定向到我的本地主机，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记录器显示我LOGIN_REQUEST动作分派，我看到锁小部件，我可以登录，它重定向到auth0.com，然后回到我的localhost:3000/callback与一个漂亮的令牌。一切都很好，我在控制台中看到Im authenticated消息，但是redux记录器没有显示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

Answer 2

我的Reactjs知识有限，但这是开始渴望一个评论…

你不应该从锁事件中调用store.dispatch(...)吗?

让这些事件返回一个函数不会做任何事情，除非有人调用返回的函数，据我所知，锁不做任何事情与回调函数的返回值你传递作为事件处理程序

Answer 3

我认为发生的事情是auth0将浏览器窗口重定向到登录权限(auth0本身，Facebook, Google等)，然后重定向到您的应用程序，重新加载您的页面，基本上清除所有状态。所以你的调度被发送，然后页面重新加载，这清除了你的状态。登录似乎工作，如果你使用localStorage而不是redux状态，但我不确定这将如何影响所有其他状态，我需要把我的应用程序