다음 인증 사용자 세션을 유지하고 다른 경로에서 제공된 ID를 사용하여 데이터를 얻으려면 어떻게 해야 합니까?

Question

여기에서 달성하고 싶은 것은 사용자가 로그인할 때마다 반환된 데이터를 저장하려는 것입니다. 데이터에는 데이터를 가져오기 위해 다른 경로에서 사용할 ID가 포함되어 있기 때문입니다. 사용자가 성공적으로 로그인하면 /home 경로로 리디렉션되고 세션에서 얻은 ID를 사용하여 데이터를 가져옵니다. 모든 것이 잘 작동하지만 홈 페이지를 새로 고치면 사용자가 비어 있게 됩니다.

내 [...nextauth].js 파일은 다음과 같습니다.

"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",
  },
});

这是我的/home路由的样子

"@/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>
  );
}

기본 홈 내보내기;

Answer 1

이 코드는 비동기 Promise를 처리하는 두 가지 다른 방법을 혼합하고 있기 때문에 문제/경합 조건을 생성하는 것 같습니다.

으아악

는 다음과 같이 변경되어야 합니다:

으아악

또는 다음:

으아악

Answer 2

이 component를 App.js 파일에 추가하세요:

으아악

이제 App 함수에서 <Component {...pageProps} />를 반환하는 대신 먼저 <Component {...pageProps} />，而是首先检查component是否具有auth属性，所以您将其包装在<Auth>中，以确保每个需要会话的组件只有在会话加载完成后才会挂载（这就是为什么用户为null에 auth 속성이 있는지 확인합니다. 세션이 필요한 모든 구성요소가 세션 로드가 완료된 후에만 마운트되도록 <Auth>로 래핑합니다(그래서 사용자가 null 코드인 이유입니다). 세션이 아직 로드 중이기 때문입니다)

으아악

마지막으로 세션을 정의하려는 각 페이지에 .auth = {}를 추가합니다(귀하의 경우 홈)

으아악

이는 세션이 만료될 때 사용자를 /sign-in페이지

로 리디렉션하는 데도 도움이 됩니다.