<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>