我需要刷新页面才能使用电子邮件和密码登录

Question

这是我的登录组件：

import React, { useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import {signInWithEmailAndPassword} from "firebase/auth";
import {auth} from "./firebase.js"

export default LoginComponent = () => {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const navigate = useNavigate();

    const handleSubmit = (e) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, email, password).then(() => {
            navigate('/')
        }).catch((error) => {
        });
    };

我的身份验证提供者：

import {onAuthStateChanged,} from "firebase/auth";
import { createContext, useEffect, useState } from "react";
import PropTypes from "prop-types";
import {auth} from "./firebase.js";

export const AuthContext = createContext(null);

const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [accessToken, setAccessToken] = useState(null);

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
            if (currentUser) {
                setAccessToken(await currentUser.getIdToken(true));
            }
            setUser(currentUser);
            setLoading(false);
        });

        return () => unsubscribe();
    }, []);

    const authValue = {
        user,
        loading,
        accessToken,
    };

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

AuthProvider.propTypes = {
children: PropTypes.node.isRequired,
};

export default AuthProvider;

在我的路线页面上，我正在这样做：

import { useContext } from 'react'
import { AuthContext } from "./components/Auth/AuthProvider.js";
import UserProfile from "./components/UserProfile"

const App = () => {
    const { user, loading } = useContext(AuthContext);

    function LandingPageRedirect({ children }) {
        if (loading) {
            return <div>Loading...</div>; 
        }
        if (user) {
            return <>{children}</>
        } else {
            return (
                <Navigate
                to="/landing"
                state={{
                    from: location.pathname,
                }}
                replace
                />
            )
        }
    }

    return (
        <div>
            <BrowserRouter>
                <Routes>
                    <Route path='/' element={
                            <LandingPageRedirect>
                                <Home />
                            </LandingPageRedirect>
                        } 
                    />

但是，登录后我被送回“/landing”而不是“/home”。我需要刷新页面才能发送到主页而不是登陆页面。我该如何解决这个问题？

Answer 1

正如您在文档中看到的那样https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#signinwithemailandpassword

signinwithemailandpassword 返回包含用户的 Promise

https://firebase.google.com/docs/reference/js/v8/firebase.auth#usercredential

所以你可以在then块中setUser。

因此从 authProvider 公开您的 setUser。 修改后的代码：

const AuthProvider = ({ children }) => {
    const [user, setUser] = useState(null);
    const [loading, setLoading] = useState(true);
    const [accessToken, setAccessToken] = useState(null);

    useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, async (currentUser) => {
            if (currentUser) {
                setAccessToken(await currentUser.getIdToken(true));
            }
            setUser(currentUser);
            setLoading(false);
        });

        return () => unsubscribe();
    }, []);

    const authValue = {
        user,
        loading,
        accessToken,
        setUser
    };

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

更新您的句柄提交

import { useContext } from 'react';
const { setUser } = useContext(AuthContext);
...
const handleSubmit = (e) => {
        e.preventDefault();
        signInWithEmailAndPassword(auth, email, password).then((res) => {
            setUser(res.user);
            navigate('/')
        }).catch((error) => {
        });
    };

此后应用程序不会将您重定向到着陆。