Bagaimanakah saya boleh mengekalkan sesi pengguna pengesahan seterusnya saya dan mendapatkan data menggunakan ID yang disediakan dalam laluan lain?

Question

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.

Beginilah rupa fail [...nextauth].js saya.

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

这是我的/home路由的样子

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;

Answer 1

Kod ini nampaknya menimbulkan masalah/keadaan perlumbaan kerana anda mencampurkan dua cara berbeza untuk mengendalikan Janji tak segerak:

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;

hendaklah ditukar kepada ini:

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

Atau ini:

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

Answer 2

Tambahkan ini component pada fail App.js anda:

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

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

Kini dalam fungsi App anda, bukannya mengembalikan <Komponen {...pageProps} />, anda mula-mula menyemak sama ada <Component {...pageProps} />，而是首先检查component是否具有auth属性，所以您将其包装在<Auth>中，以确保每个需要会话的组件只有在会话加载完成后才会挂载（这就是为什么用户为null mempunyai atribut auth , jadi anda membungkusnya dengan <Auth> untuk memastikan bahawa setiap komponen yang memerlukan sesi hanya akan dipasang selepas sesi selesai dimuatkan (itulah sebabnya pengguna null code>, sebab sesi masih loading)

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

Akhirnya anda menambah .auth = {} pada setiap halaman yang anda mahu menentukan sesi (dalam kes anda Laman Utama)

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

Ini juga membantu mengubah hala pengguna ke /sign-inhalaman

apabila sesi tamat tempoh