javascript - Firebase 登录似乎不起作用

Question

我有这个 React + Redux + Firebase 应用程序。

在 store 中，我们有一个 userReducer，它只有一个名为 authed 的状态属性，它是一个用于跟踪用户是否登录的 bool 值。

我有这个 config.js 文件，用于配置 firebase 函数和其他东西。

export const ref = firebase.database().ref();

export const firebaseAuth = firebase.auth;

export function login (email, pw) {
  return firebaseAuth().signInWithEmailAndPassword(email, pw)
}

逻辑如下>一开始authed值为false，然后我们创建一个账户使用

export function auth(email, pw) {
  return firebaseAuth().createUserWithEmailAndPassword(email, pw)
    .then(saveUser);
}

然后在 App.js 中我们有

componentDidMount() {
    this.removeListener = firebaseAuth().onAuthStateChanged((user) => {
      if (user) this.props.authed_true();
      else this.props.authed_false();
    })
  }

  componentWillUnmount () {
    this.removeListener()
  }

this.props.authed_true/false 来自 redux 的函数只是根据是否有用户更改状态的 authed prop。

如果 authed 为真，意味着我们有一个用户有一个重定向到某个路由。

现在让我们明白这一点。

注册用户工作完美，但当我尝试使用登录时

export function login (email, pw) {
  return firebaseAuth().signInWithEmailAndPassword(email, pw)
}

我得到一个

Error: A network error (such as timeout, interrupted connection or unreachable host) has occurred.

我的地址栏变成了

来自

http://localhost:3000/login

到

http://localhost:3000/login?email=anorak%40abv.bg&password=anorak97

那么为什么 login() 不起作用？有什么想法吗？

Answer 1

操作应该是对象，但是您的 login 操作创建者函数正在返回一个异步处理的 promise 。这是 redux-thunk 的一个很好的用例.使用该库，您可以将其更改为:

export function login (email, pw) {
  return (dispatch) => {
    firebaseAuth().signInWithEmailAndPassword(email, pw)
    .then(user => dispatch({ type: SIGNIN_SUCCESSFUL, payload: user }))
    .catch(err => dispatch({ type: SIGNIN_ERROR, payload: err })
  }
}