次の認証ユーザー セッションを維持し、他のルートで提供された ID を使用してデータを取得するにはどうすればよいですか?

Question

ここで実現したいのは、ユーザーがログインするたびに、返されたデータを保存したいということです。データには、データを取得するために他のルートで使用する ID が含まれているためです。ユーザーがログインに成功すると、/home ルートにリダイレクトされ、セッションから取得した ID を使用してデータが取得されます。すべて正常に動作しますが、ホームページを更新するとユーザーが空になります。

これが私の [...nextauth].js ファイルの様子です。

「next-auth」から NextAuth をインポートします;
「next-auth/providers/credentials」から CredentialsProvider をインポートします。
"axios" から axios をインポートします。

デフォルトの NextAuth({
  プロバイダー: [
    CredentialsProvider({
      名前: "資格情報"、

      資格： {
        ユーザー名: { ラベル: "ユーザー名"、タイプ: "テキスト"、プレースホルダー: "justin" }、
        パスワード: {ラベル: "パスワード"、タイプ: "パスワード"、プレースホルダー: "******"}、
      }、

      async authorize(credentials, req) {
        const url = req.body.callbackUrl.split("/auth")[0];
        const { ユーザー名、パスワード } = 認証情報;
        const user = await axios({
          URL: `${url}/api/user/login`、
          メソッド: "POST"、
          データ： {
            ユーザー名: ユーザー名、
            パスワード: パスワード、
          }、
          "コンテンツ タイプ": "アプリケーション/json"、
        })
          .then((res) => {
            res.data を返します。
          })
          .catch((err) => {
            if (err.response.data) {
              新しいエラーをスロー(err.response.data);
            } それ以外 {
              null を返します。
            }
            null を返します。
          });
        リターンユーザー。
      }、
    })、
  ]、

  コールバック: {
    jwt: ({ トークン, ユーザー }) => {
      if (ユーザー) {
        token.user = ユーザー;
      }

      トークンを返す。
    }、
    セッション: ({ セッション, トークン }) => {
      if (トークン) {
        セッション.ユーザー = トークン.ユーザー;
      }

      セッションを返す。
    }、
  }、

  ページ: {
    サインイン: "/auth/login"、
    新しいユーザー: "/auth/register"、
  }、
});

これは私的/自宅経由の子です

"@/components/card/Card" からカードをインポートします;
import React, { useEffect, useState } from "react";
「./home.module.css」からスタイルをインポートします。
「@next/font/google」から { Ubuntu } をインポートします。
import { useSession } from "next-auth/react";
import { useDispatch, useSelector } from "react-redux";

const ubuntu = Ubuntu({ 重み: "500", サブセット: ["キリル"] });
const getData = async (id) => {
  const res = await fetch({
    URL: "http://localhost:3000/api/note/getall"、
    メソッド: "POST"、
    "コンテンツ タイプ": "アプリケーション/json"、
    データ： {
      やった、
    }、
  });
  if (!res.ok) {
    コンソール.ログ(id);
    throw new Error("取得できません");
  } それ以外 {
    res.json() を返します。
    console.log(res);
  }
};

関数 home() {
  const Colors = ["#E9F5FC"、"#FFF5E1"、"#FFE9F3"、"#F3F5F7"];
  const ランダム = Math.floor(Math.random() * 5);
  const rc = 色[ランダム];
  const [pop, setPop] = useState("none");
  const { ユーザー } = useSelector((state) => state.user);
  const getDataa = async () => {
    コンソール.ログ(ユーザー)
    const data = await getData(user._id);
    コンソール.ログ(データ);
  };
  useEffect(() => {
    if (ユーザー) {
      アラート(ユーザー)
    }
  }、[]);
  戻る （
    <div className={styles.home}>
      <ヘッダー>
        <h3 クラス名={ubuntu.クラス名}>
          こんにちは、<br /> {ユーザー?.ユーザー名}!
        </h3>
        <入力タイプ="テキスト"プレースホルダー=「検索」 />
      </ヘッダー>

      <div className={styles.nav}>
        <h1 className={ubuntu.className}>メモ</h1>
      </div>

      <div className={styles.section}>
        <div className={styles.inner}>
          {/* {データ&&
            data.map((e) => (
              <カード
                rawData={e}
                color={colors[Math.floor(Math.random() * color.length)]}
              />
            ))} */}
        </div>
      </div>

      <div className="new"></div>
    </div>
  );
}

デフォルトのホームをエクスポート;

Answer 1

このコードでは、非同期 Promise を処理する 2 つの異なる方法を混合しているため、問題/競合状態が発生しているようです。 リーリー

は次のように変更する必要があります: リーリー

または次のようにします: リーリー

Answer 2

この component を App.js ファイルに追加します:

リーリー

今度は、App 関数で、<Component {...pageProps} /> を返す代わりに、まず component を確認してください。 auth 属性なので、この属性を <Auth> でラップして、セッションを必要とするすべてのコンポーネントがセッションの読み込み完了後にのみマウントされるようにします (これがユーザーが # である理由です) ##null セッションがまだロード中のため) リーリー

最後に、セッションを定義する各ページ (この場合はホーム)

.auth = {} を追加します。 リーリー これは、セッションの有効期限が切れたときにユーザーを

/sign-in

ページ にリダイレクトするのにも役立ちます