検索

ホームページ  >  に質問  >  本文

Next.js ベースのコンポーネントを条件付きでレンダリングする: リクエストが認証された Firebase ユーザーからのものであるかどうかを判断するにはどうすればよいですか?

<p><strong>注: </strong>Next.js 13 と <code>app/</code> ディレクトリを使用しています。 </p>
<p>私は Firebase と Next.js を学んでいて、おもちゃの問題を解決する方法を理解しようとしています。このような <code>Home()</code>Component</p> があるとします。 <p><strong><code>/app/page.jsx</code></strong></p> <pre class="brush:php;toolbar:false;">デフォルト関数 Home() をエクスポート { 戻る ( <メイン> <h1>Hello World</h1> <p>認証されたユーザーのみがこのテキストを表示できます</p> </メイン> ) }</pre> <p>私の目標は、ページをリクエストしているユーザーがログインしているユーザーかどうかに基づいて、<code><p>...</p></code> 内のすべてを条件付きでレンダリングすることです。 Firebase は、JWT、Next.js 13 を使用してこのコンポーネントをサーバー側でレンダリングするため、これは可能だと思いますが、その方法がわかりません。 </p> <p>onAuthStateChanged については知っていますが、私の知る限り、これはクライアント側でのみ使用できます。 (知識のあるユーザーは、引き続きこの保護されたコンテンツを表示できます。) このコンテンツを <em>サーバー側</em> で保護するにはどうすればよいですか? </p>
P粉616111038P粉616111038457日前567

全員に返信(1)返信します

  • P粉037880905

    P粉0378809052023-08-27 12:25:17

    ユーザーがログインしているかどうかを確認するには、「onAuthStateChanged」メソッドを使用できます。

    この情報をコンポーネントの状態に保存するか、コンポーネントの一部を条件付きでレンダリングするために使用します。

    リーリー

    サーバー側でユーザー認証を実行するために、Next.js はユーザーの認証ステータスを取得するための「getServerSideProps」を提供します

    リーリー

    更新されたソリューション:

    サーバー側ルートを作成する

    リーリー

    クライアントコード

    リーリー

    返事
    0
  • キャンセル返事