javascript - 如何/等待一秒钟/在用户登录受限路线后导航？

Question

所以我的意思是，我有一个功能，在用户登录后，在一秒钟内将他/她导航到主页，例如:

const handleSignIn = async (e) => {
    e.preventDefault();

    const user = await signIn(formData);

    if (user) {
      toast.success('Signed In!');

      setTimeout(() => {
        navigate('/');
      }, 1000);
    } else {
      toast.error('Bad user credentials!');
    }
  };

但是，我构建了一个 protected 路由，例如:

function App() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
      setIsLoading(true);

      if (user) {
        setUser(user);
      } else {
        setUser(null);
      }

      setIsLoading(false);
    });

    return unsubscribe;
  }, []);

  if (isLoading) return <Spinner />;

  return (
    <>
      <Router>
        <Routes>
          <Route path='/' element={<PrivateRoute />}>
            <Route index element={<Explore />} />
            <Route path='/offers' element={<Offers />} />
            <Route path='/profile' element={<Profile />} />
            <Route path='/contact/:landlordId' element={<Contact />} />
            <Route path='/create-listing' element={<CreateListing />} />
            <Route path='/category/:categoryName' element={<Category />} />
            <Route path='/category/:categoryName/:id' element={<Listing />} />
          </Route>
          <Route
            path='/sign-in'
            element={!user ? <SignIn /> : <Navigate to='/' />}
          />
          <Route
            path='/sign-up'
            element={!user ? <SignUp /> : <Navigate to='/' />}
          />
          <Route
            path='/forgot-password'
            element={!user ? <ForgotPassword /> : <Navigate to='/' />}
          />
        </Routes>
        {user && <Navbar />}
      </Router>

      <ToastContainer autoClose={1000} />
    </>
  );
}

export default App;

所以这里的问题是，每当用户登录或注销时，onAuthStateChanged 都会被执行，因此它会强制应用重新呈现以了解谁登录和注销，然后相应地执行操作，例如限制某些路线并允许其他路线。

当用户登录时，我想显示一些 toast 消息，但它触发了应用程序级别的状态，在我显示 toast 和导航用户之前，由于限制，它会自动将用户导航到主页，我怎么能等在这样做之前的第二个？

Answer 1

你不能在调用 setUser() 之前等待 x 时间吗？这是因为 setUser() 更新了触发导航的 user 值。

useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, (user) => {
        setIsLoading(true);

        setTimeout(() => {
            if (user) {
                setUser(user);
            } else {
                setUser(null);
            }

            setIsLoading(false);
        }, 1000);
    });

    return unsubscribe;
}, []);

或者，使用带有自定义 wait 异步函数的 async/await 来避免嵌套:

const wait = async (d) => new Promise(r => setTimeout(d, r));

useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (user) => {
        setIsLoading(true);

        await wait(1000);

        if (user) {
            setUser(user);
        } else {
            setUser(null);
        }

        setIsLoading(false);
    });

    return unsubscribe;
}, []);