コンソールでブラウザがハングアップしないようにするためのナビゲーション制限

Question

ダッシュボード ページ用に PrivateRoute が作成されました。ログインしていない場合は URL からアクセスできませんが、ダッシュボード ページを更新すると認証ページにリダイレクトされます。そこでsessionStorageを追加しましたが、更新するとページにリダイレクトし続けるため、コンソールに「ブラウザがハングしないようにナビゲーションを調整しています」と表示されます。

//以下は代詞

//App.js

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
「./components/dashboard」からダッシュボードをインポートします。
「./components/auth」から認証をインポートします。
"./PrivateRoute" から PrivateRoute をインポートします。

関数 App() {
  戻る （
    <ルーター>
      <ルート>
        <Route path="/signin" element={<Auth />} />
        <ルート
          パス="/ダッシュボード"
          要素={<PrivateRoute> <ダッシュボード /></PrivateRoute>}
        />
      </ルート>
    </ルーター>
  );
}

デフォルトのアプリをエクスポート;

//PrivateRoute.js

import { Navigate } from "react-router-dom";
import { auth } から "./config/firebase";

関数 PrivateRoute({ 子 }) {
  const ユーザー = auth.currentUser;

  // 检查用户か否か既通过身份验证
  if (!user) {
    // 用人は身份验证を通過せず、登録面に向かって再設定します
    return <「/signin」に移動/ replace/>;
  }

  // 使用者は身元証明、渲染保護された経路を通過しました
  子供を返す。
}

デフォルトの PrivateRoute;

をエクスポートします。

//Auth.js

import { useEffect, useState } from "react";
「react-router-dom」からインポート { useNavigate };
import { auth, googleProvider } から "../config/firebase";
輸入 {
  電子メールとパスワードを使用してユーザーを作成、
  ポップアップでサインイン、
  サインアウト、
「firebase/auth」から;

関数認証 () {
  const [電子メール、setEmail] = useState("");
  const [パスワード, setPassword] = useState("");
  const navigate = useNavigate();

  console.log(auth?.currentUser?.email);

  useEffect(()=> {
    const userFromStorage = JSON.parse(sessionStorage.getItem("user"));
    if(userFromStorage){
      console.log(userFromStorage);
      ナビゲート("/ダッシュボード");
    }
  } , [ナビゲート]);

  constsignIn = async () => {
    試す {
      await createUserWithEmailAndPassword(認証、電子メール、パスワード);
      sessionStorage.setItem("user" , JSON.stringify(auth.currentUser));
      ナビゲート("/ダッシュボード");
    } キャッチ (エラー) {
      コンソール.エラー(エラー);
    }
  };

  constsignInWithGoogle = async () => {
    試す {
      SignInWithPopup(auth, googleProvider) を待ちます。
      sessionStorage.setItem("ユーザー", JSON.stringify(auth.currentUser));
      navigate("./ダッシュボード");
    }キャッチ (エラー) {
      コンソール.エラー(エラー);
    }
  };

  const ログアウト = async () => {
    試す {
      サインアウト（認証）を待ちます;
      sessionStorage.removeItem("ユーザー");
    } キャッチ (エラー) {
      コンソール.エラー(エラー);
    }
  };

  戻る （
    <div>
      <input placeholder="email" onChange={(e) => setEmail(e.target.value)} />
      <入力
        type="パスワード"
        プレースホルダー = "パスワード"
        onChange={(e) => setPassword(e.target.value)}
      />
      <button onClick={signIn}>サインイン</button>
      <button onClick={signInWithGoogle}>Google でログイン</button>
      <ボタン onClick={ログアウト}>ログアウト</button>
    </div>
  );
};
デフォルトの認証をエクスポート;

初心者なので、このエラーは望ましくありません。改善の余地がある場合は、お気軽にお知らせください。

Answer 1

認証ステータスは非同期的に処理する必要があります。

リーリー