次の認証ユーザー セッションを維持し、他のルートで提供された ID を使用してデータを取得するにはどうすればよいですか?
<p>ここで実現したいのは、ユーザーがログインするたびに、返されたデータを保存したいということです。データには、データを取得するために他のルートで使用する ID が含まれているためです。ユーザーがログインに成功すると、/home ルートにリダイレクトされ、セッションから取得した ID を使用してデータが取得されます。すべて正常に動作しますが、ホームページを更新するとユーザーが空になります。 </p>
<p>これが私の [...nextauth].js ファイルの様子です。</p>
<pre class="brush:php;toolbar:false;">「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"、
}、
});</pre>
<p>これは私的/自宅経由の子です</p>
<pre class="brush:php;toolbar:false;">"@/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>
);
}
デフォルトのホームをエクスポート;</pre></p>
