<p>Apa yang saya ingin capai di sini ialah apabila pengguna log masuk, saya ingin menyimpan data yang dikembalikan kerana data tersebut mengandungi ID yang akan saya gunakan dalam laluan lain untuk mendapatkan data. Apabila pengguna berjaya log masuk, dia akan diubah hala ke laluan /home dan ID yang diperolehi daripada sesi akan digunakan untuk mengambil data. Semuanya berfungsi dengan baik tetapi jika saya memuat semula halaman utama pengguna menjadi kosong. </p> <p>Beginilah rupa fail [...nextauth].js saya.</p> <pre class="brush:php;toolbar:false;">import NextAuth daripada "next-auth"; import KredensialPembekal daripada "next-auth/providers/credentials"; import axios daripada "axios"; eksport lalai NextAuth({ pembekal: [ Pembekal Kredensial({ nama: "tauliah", kelayakan: { nama pengguna: { label: "Nama pengguna", jenis: "teks", pemegang tempat: "justin" }, kata laluan: {label: "Kata Laluan",jenis: "kata laluan",pemegang tempat: "******"}, }, async authorize(kredential, req) { url const = req.body.callbackUrl.split("/auth")[0]; const { nama pengguna, kata laluan } = kelayakan; pengguna const = menunggu axios({ url: `${url}/api/user/login`, kaedah: "POST", data: { nama pengguna: nama pengguna, kata laluan: kata laluan, }, "jenis kandungan": "aplikasi/json", }) .then((res) => { pulangkan res.data; }) .catch((err) => { jika (err.response.data) { buang Ralat baharu(err.response.data); } lain { kembali null; } kembali null; }); kembali pengguna; }, }), ], panggilan balik: { jwt: ({ token, pengguna }) => { jika (pengguna) { token.user = pengguna; } token pulangan; }, sesi: ({ sesi, token }) => { jika (token) { session.user = token.user; } sesi kembali; }, }, muka surat: { daftar masuk: "/auth/login", Pengguna baru: "/auth/register", }, });</pre> <p>这是我的/home路由的样子</p> <pre class="brush:php;toolbar:false;">import Kad daripada "@/components/card/Kad"; import React, { useEffect, useState } daripada "react"; import gaya daripada "./home.module.css"; import { Ubuntu } daripada "@next/font/google"; import { useSession } daripada "next-auth/react"; import { useDispatch, useSelector } daripada "react-redux"; const ubuntu = Ubuntu({ berat: "500", subset: ["cyrillic"] }); const getData = async (id) => { const res = tunggu ambil({ url: "http://localhost:3000/api/note/getall", kaedah: "POST", "jenis kandungan": "aplikasi/json", data: { saya telah lakukan, }, }); jika (!res.ok) { console.log(id); buang Ralat baharu("Tidak dapat mengambil"); } lain { return res.json(); console.log(res); } }; function home() { warna const = ["#E9F5FC", "#FFF5E1", "#FFE9F3", "#F3F5F7"]; const rawak = Math.floor(Math.random() * 5); const rc = warna[rawak]; const [pop, setPop] = useState("tiada"); const { pengguna } = useSelector((state) => state.user); const getDataa = async () => { console.log(pengguna) data const = tunggu getData(user._id); console.log(data); }; useEffect(() => { jika (pengguna) { makluman(pengguna) } }, []); kembali ( <div className={styles.home}> <tajuk> <h3 className={ubuntu.className}> Helo, <br /> {user?.username}! </h3> <jenis input="teks" pemegang tempat="cari" /> </header> <div className={styles.nav}> <h1 className={ubuntu.className}>Nota</h1> </div> <div className={styles.section}> <div className={styles.inner}> {/* {data && data.map((e) => ( <Kad rawData={e} color={colors[Math.floor(Math.random() * colors.length)]} /> ))} */} </div> </div> <div className="baru"></div> </div> ); } eksport rumah lalai;</pre></p>

const user = await axios({
  url: `${url}/api/user/login`,
  method: "POST",
  data: {
    username: username,
    password: password,
  },
  "content-type": "application/json",
})
  .then((res) => {
    return res.data;
  })
  .catch((err) => {
    if (err.response.data) {
      throw new Error(err.response.data);
    } else {
      return null;
    }
    return null;
  });
return user;

try {
  const user = await axios({
    url: `${url}/api/user/login`,
    method: "POST",
    data: {
      username: username,
      password: password,
    },
    "content-type": "application/json",
  });
  return user.data;
} catch (err) {
  if (err.response.data) {
    throw new Error(err.response.data);
  } else {
    return null;
  }
}

axios({
  url: `${url}/api/user/login`,
  method: "POST",
  data: {
    username: username,
    password: password,
  },
  "content-type": "application/json",
}).then((res) => {
  return res.data;
}).catch((err) => {
  if (err.response.data) {
    throw new Error(err.response.data);
  } else {
    return null;
  }
  return null;
});

function Auth({ children }) {
  const router = useRouter();
  const { status } = useSession({
    required: true,
    onUnauthenticated() {
      router.push("/sign-in");
    },
  });

  if (status === "loading") {
    return 
Loading ...
;
  }
  return children;
}

{
  Component.auth ? (
    
      
    
  ) : (
    
  );
}

const Home = () => {
//....
}
Home.auth = {};