登录后如何重定向到主页然后重新加载？

Question

我的网页每次都需要重新加载以更新用户状态。 至于问题，在handleLogin函数中，由于AuthContextProvider组件检查onAuthStateChanged，页面应该重定向到主页（'/'）并刷新自身，以便更新用户状态。但是，它只能重新加载页面，或重定向到主页（我需要手动刷新）。所以请帮助我对此提出一些想法。

我正在考虑做 global.this 添加一个布尔值，handleLogin可以在本地访问如何在React中声明全局变量？。 由于其中大部分是客户端组件，因此到目前为止只有 router.push 可以在页面之间重定向。

src/app/login/page.jsx

'use client';

import Link from "next/link";
import "../../components/auth";

import { useState } from "react";
import { auth } from "../../components/auth";
import { signInWithEmailAndPassword } from "firebase/auth";
import { useRouter } from "next/navigation";
import { redirect } from "next/navigation";

//SOME CONDITIONALS VALID_EMAIL AND VALID_PASSWORD 

export default function loginPage() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();
  //*EVENT
  const handleLogin = async (e) => {
    e.preventDefault();
    if (valid_email(email) && valid_password(password)) {
      signInWithEmailAndPassword(auth, email, password)
        .then((res) => {
          console.log({ res });
          router.push('/'); //WORKAROUND?
          document.reload(); //WORKAROUND?
        })
        .catch((e) => console.error(e));
    }
  }

   // RETURN SOME RENDERING

src/components/authContext.jsx

'use client'
import React from 'react';
import { onAuthStateChanged} from 'firebase/auth';
import { auth } from "../components/auth"
import { useRouter } from 'next/navigation';

export const AuthContext = React.createContext({});

export const useAuthContext = () => React.useContext(AuthContext);

const AuthContextProvider = ({
    children,
}) => {
    const [user, setUser] = React.useState(null);
    const [loading, setLoading] = React.useState(true);
    const [redirect, setRedirect] = React.useState(false);
    const router = useRouter();

    React.useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, (user) => {
            if (user) {
                setUser(user);
                if (redirect) location.reload();

            } else {
                setUser(null);
                if (redirect) location.reload();
            }
            
            setRedirect(false);
            setLoading(false);
        });

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

    return (
        <AuthContext.Provider value={{ user }}>
            {loading ? <div>Loading...</div> : children}
        </AuthContext.Provider>
    );
};

export default AuthContextProvider;

Answer 1

使用

router.push(redirectUrl ?? '/');

是一种常见模式，特别是如果用户在尝试访问受身份验证保护的路由后被定向到登录页面，那么他们可以被重定向回最初浏览的页面。