javascript - reactjs中使用firebase身份验证的登录功能

Question

我正在尝试创建一个登录功能良好且工作正常的项目，但是当我登录并刷新屏幕时，注销按钮消失并且登录链接会出现，然后再次注销按钮会出现。完全了解观看视频https ://drive.google.com/file/d/1UvTPXPvHf4EhcrifxDEfPuPN0ojUV_mN/view?usp=sharing，这是因为

const AuthContext = React.createContext()
//useauth will return the AuthContext
export const useAuth = () => {
  return useContext(AuthContext)
}

export const Authprovider = ({ children }) => {
  var name
  auth.onAuthStateChanged((user) => {
    name = user
  })
  const [currentuser, setcurrentuser] = useState(name)
  const [load, setload] = useState(true)

  function signup(email, password) {
    return auth.createUserWithEmailAndPassword(email, password)
  }

  function login(email, password) {
    return auth.signInWithEmailAndPassword(email, password)
  }

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      setcurrentuser(user)
      setload(false)
    })

    return unsubscribe
  }, [])

  const value = {
    currentuser,
    signup,
    login,
    load,
  }

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

我将 AuthProvider 组件包裹在 app 组件周围，以便我可以使用诸如 current user 之类的值。在登录链接的标题组件中，有注销按钮

 const { currentuser, load } = useAuth()
  const logout = () => {
    try {
      auth.signOut().then(() => {
        console.log('logged out')
      })
    } catch {
      alert('logout is not possible')
    }
  }
//some code
  {currentuser ? (
            <button onClick={logout}>Logout</button>
          ) : (
            <Link to='/login'>Login</Link>
          )}

如果有当前用户，则会出现注销按钮，否则会出现登录链接但是刷新时出现一些问题我尝试了很多方法现在我没有想法。“即使我在登录时刷新页面，注销按钮也不应该消失”你能告诉我该怎么做吗？了解观看链接中的视频

标签： javascriptreactjsfirebasefirebase-authenticationlocal-storage

Answer 1

那是因为你没有使用load state试试这个：

//some code
  { load ? <div>loading</div> 
         : currentuser ? (
            <button onClick={logout}>Logout</button>
          ) : (
            <Link to='/login'>Login</Link>
          )}