<p>Ce que je veux réaliser ici, c'est que chaque fois qu'un utilisateur se connecte, je souhaite stocker les données renvoyées car les données contiennent un identifiant que j'utiliserai dans d'autres itinéraires pour obtenir les données. Lorsque l'utilisateur se connecte avec succès, il sera redirigé vers la route /home et l'ID obtenu lors de la session sera utilisé pour récupérer les données. Tout fonctionne bien mais si j'actualise la page d'accueil, l'utilisateur devient vide. </p> <p>Voici à quoi ressemble mon fichier [...nextauth].js.</p> <pre class="brush:php;toolbar:false;">importer NextAuth depuis "next-auth" ; importer CredentialsProvider depuis "next-auth/providers/credentials" ; importer des axios depuis "axios" ; exporter NextAuth par défaut ({ fournisseurs: [ Fournisseur d'informations d'identification ({ nom : « informations d’identification », informations d'identification: { nom d'utilisateur : { étiquette : "Nom d'utilisateur", tapez : "texte", espace réservé : "justin" }, mot de passe : {libellé : "Mot de passe", tapez : "mot de passe", espace réservé : "******"}, }, autorisation asynchrone (informations d'identification, demande) { const url = req.body.callbackUrl.split("/auth")[0]; const { nom d'utilisateur, mot de passe } = informations d'identification ; const utilisateur = attendre axios({ URL : `${url}/api/user/login`, méthode : "POST", données: { nom d'utilisateur : nom d'utilisateur, mot de passe : mot de passe, }, "content-type": "application/json", }) .then((res) => { renvoyer res.data ; }) .catch((erreur) => { si (err.response.data) { lancer une nouvelle erreur (err.response.data); } autre { renvoie null ; } renvoie null ; }); retourner l'utilisateur ; }, }), ], rappels : { jwt : ({jeton, utilisateur }) => { si (utilisateur) { token.user = utilisateur ; } jeton de retour ; }, session : ({session, jeton}) => { si (jeton) { session.user = jeton.user; } séance de retour ; }, }, pages : { connexion : "/auth/login", nouvelutilisateur : "/auth/register", }, });</pré> <p>这是我的/home路由的样子</p> <pre class="brush:php;toolbar:false;">importer la carte depuis "@/components/card/Card"; importer React, { useEffect, useState } depuis "react" ; importer des styles depuis "./home.module.css"; importer { Ubuntu } depuis "@next/font/google" ; importer { useSession } depuis "next-auth/react" ; importer { useDispatch, useSelector } depuis "react-redux" ; const ubuntu = Ubuntu({ poids : "500", sous-ensembles : ["cyrillique"] }); const getData = async (id) => { const res = attendre récupérer ({ URL : "http://localhost:3000/api/note/getall", méthode : "POST", "content-type": "application/json", données: { je l'ai fait, }, }); si (!res.ok) { console.log(id); lancer une nouvelle erreur ("Impossible de récupérer"); } autre { return res.json(); console.log(res); } }; fonction maison() { const couleurs = ["#E9F5FC", "#FFF5E1", "#FFE9F3", "#F3F5F7"] ; const random = Math.floor(Math.random() * 5); const rc = couleurs[aléatoire]; const [pop, setPop] = useState("aucun"); const { utilisateur } = useSelector((state) => state.user); const getDataa = async () => { console.log (utilisateur) const data = wait getData(user._id); console.log(données); } ; useEffect(() => { si (utilisateur) { alerte (utilisateur) } }, []); retour ( <div className={styles.home}> <en-tête> <h3 className={ubuntu.className}> Bonjour, <br /> {utilisateur?.nom d'utilisateur} ! </h3> <type d'entrée="texte" placeholder="recherche" /> </en-tête> <div className={styles.nav}> <h1 className={ubuntu.className}>Notes</h1> </div> <div className={styles.section}> <div className={styles.inner}> {/* {données && data.map((e) => ( <Carte données brutes={e} couleur={couleurs[Math.floor(Math.random() * couleurs.longueur)]} /> ))} */} </div> </div> <div className="nouveau"></div> </div> ); } exporter la page d'accueil par défaut ;</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 = {};