无法阻止导航到下一页反应firebase

Question

我正在使用Firebase创建一个Web应用程序，并进行反应。我的注册功能有效，但是我在边缘案例中遇到了一些麻烦，例如用户尝试使用已经存在的电子邮件注册时。如何防止导航到下一页？

async function handleSignup(e) {
        e.preventDefault()
        validatePassword()
        try {
            // setError('')
            setLoading(true)
            await signup(emailRef.current.value, passwordRef.current.value)
            history.push('/profile')
            console.log('created User' + currentUser.uid)
        } catch {
            setError('Failed to Create an Account')
        }
        setLoading(false)
    }

function signup(email, password) {
        auth.createUserWithEmailAndPassword(email, password)
            .then((cred) => {
                return db.collection('students').doc(cred.user.uid).set()
            })
            .catch((e) => {
                if (e.code === 'auth/email-already-in-use') {
                    console.log('Email already in Use')
                    alert('Email already in use')
                }
                if (e.code === 'auth/weak-password')
                    alert(
                        'Password must be at least 7 characters long and contain special characters'
                    )
            })
    }

Answer 1

您需要使用 Promise 。

const signup = (email, password) => new Promise((resolve, reject) => {
  auth.createUserWithEmailAndPassword(email, password)
      .then((cred) => {
          return resolve(db.collection('students').doc(cred.user.uid).set())
      })
      .catch((e) => {
          if (e.code === 'auth/email-already-in-use') {
              console.log('Email already in Use')
              return reject('Email already in use')
          }
          if (e.code === 'auth/weak-password')
              return reject('Password must be at least 7 characters long and contain special characters')
      })
});

// and you can use now the try ... catch

try {
  // setError('')
  setLoading(true)
  await signup(emailRef.current.value, passwordRef.current.value)
  history.push('/profile')
  console.log('created User' + currentUser.uid)
} catch(error) {
  setError(error)
}

Answer 2

已经存在的电子邮件不是边缘案例:)

history.push（'/profile'）仅在注册为成功时才调用，
因此，如果注册失败，则应丢失错误并转到捕获块。
可能值得检查注册功能是否会如您期望的

Answer 3

一种方法是，当您在 signup 函数中遇到错误时，您应该抛出该错误，以便 handleSignup 不会执行 await 之后的代码注册（...）。

基本上，您的目标是在出现错误时突破“成功障碍”。 alert() 不会提供预期的行为，因为它不会抛出任何内容，这就是即使您的 signup 也会触发 history.push 的原因被拒绝并出现警报。

相反，它会捕获错误并执行 setError(...)。

因此，您的 signup 函数将如下所示，

function signup(email, password) {
  auth.createUserWithEmailAndPassword(email, password)
    .then((cred) => {
      return db.collection('students').doc(cred.user.uid).set()
    })
    .catch((e) => {
      if (e.code === 'auth/email-already-in-use') {
        throw new Error(`Email is already in use, ${e}`)
      }
      if (e.code === 'auth/weak-password')
        throw new Error('Password must be at least 7 characters long and contain special characters')
      }
    )}

Answer 4

Firebase 不允许您使用同一电子邮件注册两次。我建议使用他们的错误消息。
他们也不允许输入六个字符以下的密码。

您是否正在寻找适合其他系统的特定解决方案或通用解决方案？

您可以尝试我的存储库。我使用（免费）Firebase Auth 服务以及它们发回的错误。