<p>Was ich hier erreichen möchte, ist, dass ich bei jeder Anmeldung eines Benutzers die zurückgegebenen Daten speichern möchte, da die Daten eine ID enthalten, die ich in anderen Routen zum Abrufen der Daten verwenden werde. Wenn sich der Benutzer erfolgreich anmeldet, wird er zur Route /home weitergeleitet und die aus der Sitzung erhaltene ID wird zum Abrufen der Daten verwendet. Alles funktioniert einwandfrei, aber wenn ich die Startseite aktualisiere, wird der Benutzer leer. </p> <p>So sieht meine [...nextauth].js-Datei aus.</p> <pre class="brush:php;toolbar:false;">NextAuth aus "next-auth" importieren; CredentialsProvider aus „next-auth/providers/credentials“ importieren; Axios aus „Axios“ importieren; Standard-NextAuth({ exportieren) Anbieter: [ CredentialsProvider({ Name: "Anmeldeinformationen", Referenzen: { Benutzername: { Label: "Benutzername", Typ: "Text", Platzhalter: "justin" }, Passwort: {Label: "Passwort", Typ: "Passwort", Platzhalter: "******"}, }, asynchrone Autorisierung (Anmeldeinformationen, erforderlich) { const url = req.body.callbackUrl.split("/auth")[0]; const { Benutzername, Passwort } = Anmeldeinformationen; const user = wait axios({ URL: „${url}/api/user/login“, Methode: "POST", Daten: { Benutzername: Benutzername, Passwort: Passwort, }, "content-type": "application/json", }) .then((res) => { return res.data; }) .catch((err) => { if (err.response.data) { throw new Error(err.response.data); } anders { null zurückgeben; } null zurückgeben; }); Benutzer zurückgeben; }, }), ], Rückrufe: { jwt: ({ token, user }) => { if (Benutzer) { token.user = Benutzer; } Rückgabe-Token; }, Sitzung: ({ Sitzung, Token }) => { if (Token) { session.user = token.user; } Rückfahrt; }, }, Seiten: { signIn: "/auth/login", neuerBenutzer: "/auth/register", }, });</pre> <p>这是我的/home路由的样子</p> <pre class="brush:php;toolbar:false;">Karte importieren aus "@/components/card/Card"; import React, { useEffect, useState } aus "react"; Stile aus „./home.module.css“ importieren; import { Ubuntu } from "@next/font/google"; import { useSession } from "next-auth/react"; import { useDispatch, useSelector } aus „react-redux“; const ubuntu = Ubuntu({ Gewicht: "500", Teilmengen: ["kyrillisch"] }); const getData = async (id) => { const res = warte auf fetch({ URL: "http://localhost:3000/api/note/getall", Methode: "POST", "content-type": "application/json", Daten: { Ich tat, }, }); if (!res.ok) { console.log(id); throw new Error("Abruf nicht möglich"); } anders { return res.json(); console.log(res); } }; Funktion home() { const Colors = ["#E9F5FC", "#FFF5E1", "#FFE9F3", "#F3F5F7"]; const random = Math.floor(Math.random() * 5); const rc = farben[zufällig]; const [pop, setPop] = useState("none"); const { user } = useSelector((state) => state.user); const getDataa = async () => { console.log(Benutzer) const data = waiting getData(user._id); console.log(data); }; useEffect(() => { if (Benutzer) { Warnung(Benutzer) } }, []); zurückkehren ( <div className={styles.home}> <Kopfzeile> <h3 className={ubuntu.className}> Hallo, <br /> {Benutzer?.Benutzername}! </h3> <Eingabetyp="Text" placeholder="suchen" /> </header> <div className={styles.nav}> <h1 className={ubuntu.className}>Notizen</h1> </div> <div className={styles.section}> <div className={styles.inner}> {/* {Daten && data.map((e) => ( <Karte rawData={e} color={colors[Math.floor(Math.random() * farben.length)]} /> ))} */} </div> </div> <div className="new"></div> </div> ); } Standard-Home exportieren;</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 = {};