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

Question

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

我上网查了一下，没有符合我的问题的。有教程here, but it uses the Popup mode instead of the Redirect (default now) mode. Another one解析url，在Lock 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 logger 显示 LOGIN_REQUEST 已调度操作，我看到锁定小部件，我可以登录，它重定向到 auth0.com，然后返回到我的 localhost:3000/callback 带有漂亮的标记。一切都很好，我在我的控制台中看到 Im authenticated 消息，但是 redux 记录器没有显示 LOGIN_SUCCESS 操作已被调度。

我是 Redux 的新手，我想我错过了一件事，但我无法抓住它。谢谢！

Answer 1

我对 Reactjs 的了解有限，但这已经开始让人期待评论了...

您不应该从锁定事件中调用 store.dispatch(...) 吗？

拥有这些事件 return 函数不会做任何事情，除非有人调用 returned 的函数，据我所知，Lock 不会对 return 值做任何事情您作为事件处理程序传递的回调函数。

Answer 2

我认为发生的事情是 auth0 将浏览器 window 重定向到登录权限（auth0 本身、Facebook、Google 等），然后将您重定向回您的应用，这会重新加载您的页面，基本上消灭所有状态。所以你的调度被发送，然后页面重新加载，这会消除你的状态。如果您使用 localStorage 而不是 redux 状态，登录似乎可以工作，但我不确定这将如何影响我需要放入我的应用程序中的所有其他状态。

Answer 3

我终于把里面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

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

Dispatch action on Auth0's lock.on('authenticated') event

authentication

reactjs

auth0

redux