다음 인증 사용자 세션을 유지하고 다른 경로에서 제공된 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 내보내기({
제공업체: [
자격 증명 제공자({
이름: "자격증명",
자격 증명: {
사용자 이름: { 라벨: "사용자 이름", 유형: "text", 자리 표시자: "justin" },
비밀번호: {레이블: "비밀번호", 유형: "비밀번호", 자리표시자: "*****"},
},
비동기 승인(자격 증명, 요청) {
const url = req.body.callbackUrl.split("/auth")[0];
const { 사용자 이름, 비밀번호 } = 자격 증명;
const 사용자 = axios({
URL: `${url}/api/user/login`,
방법: "POST",
데이터: {
사용자 이름: 사용자 이름,
비밀번호: 비밀번호,
},
"content-type": "application/json",
})
.then((res) => {
res.data를 반환합니다.
})
.catch((err) => {
if (err.response.data) {
새로운 오류 발생(err.response.data);
} 또 다른 {
null을 반환;
}
null을 반환;
});
복귀 사용자;
},
}),
],
콜백: {
jwt: ({ 토큰, 사용자 }) => {
if (사용자) {
토큰.사용자 = 사용자;
}
토큰 반환;
},
세션: ({ 세션, 토큰 }) => {
if (토큰) {
세션.사용자 = 토큰.사용자;
}
복귀 세션;
},
},
페이지: {
로그인: "/auth/login",
새로운 사용자: "/auth/register",
},
});</pre>
<p>这是我的/home路由的样子</p>
<pre class="brush:php;toolbar:false;">"@/comComponents/card/Card"에서 카드 가져오기;;
import React, { useEffect, useState } from "react"
"./home.module.css"에서 스타일을 가져옵니다.
"@next/font/google"에서 { Ubuntu }를 가져옵니다.
"next-auth/react"에서 import { useSession }을;;
import { useDispatch, useSelector } from "react-redux"
const ubuntu = Ubuntu({ 가중치: "500", 하위 집합: ["키릴 문자"] });
const getData = async (id) => {
const res = 가져오기를 기다립니다({
URL: "http://localhost:3000/api/note/getall",
방법: "POST",
"content-type": "application/json",
데이터: {
아이디: 아이디,
},
});
if (!res.ok) {
console.log(id);
새로운 오류 발생("가져올 수 없습니다");
} 또 다른 {
res.json()을 반환합니다.
console.log(res);
}
};
함수 홈() {
const colors = ["#E9F5FC", "#FFF5E1", "#FFE9F3", "#F3F5F7"];
const 무작위 = Math.floor(Math.random() * 5);
const rc = 색상[임의];
const [pop, setPop] = useState("없음");
const { user } = useSelector((state) => state.user);
const getDataa = async () => {
console.log(사용자)
const 데이터 = getData(user._id)를 기다립니다;
console.log(데이터);
};
useEffect(() => {
if (사용자) {
알림(사용자)
}
}, []);
반품 (
<div className={styles.home}>
<헤더>
<h3 className={ubuntu.className}>
안녕하세요, <br /> {사용자?.사용자 이름}!
</h3>
<입력 유형="텍스트" 자리 표시자="검색" />
</헤더>
<div className={styles.nav}>
<h1 className={ubuntu.className}>메모</h1>
</div>
<div className={styles.section}>
<div className={styles.inner}>
{/* {데이터 &&
data.map((e) => (
<카드
원시데이터={e}
색상={색상[Math.floor(Math.random() * colors.length)]}
/>
))} */}
</div>
</div>
<div className="new"></div>
</div>
);
}
기본 홈 내보내기;</pre></p>
