Comment puis-je conserver ma session utilisateur de prochaine authentification et obtenir les données en utilisant l'ID fourni dans d'autres itinéraires ?

Question

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.

Voici à quoi ressemble mon fichier [...nextauth].js.

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 ;

Answer 1

Ce code semble créer un problème/une condition de concurrence car vous mélangez deux manières différentes de gérer la promesse asynchrone :

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;

devrait être remplacé par ceci :

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

ou ceci :

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

Ajoutez ceci component à votre fichier App.js :

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

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

Maintenant, dans votre fonction App, au lieu de renvoyer <Component {...pageProps} />, vous vérifiez d'abord si <Component {...pageProps} />，而是首先检查component是否具有auth属性，所以您将其包装在<Auth>中，以确保每个需要会话的组件只有在会话加载完成后才会挂载（这就是为什么用户为null a l'attribut auth, donc vous l'enveloppez dans <Auth> pour garantir que chaque composant qui nécessite une session ne sera monté qu'une fois le chargement de la session terminé (c'est pourquoi l'utilisateur est null code>, car la session est toujours en cours de chargement)

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

Enfin vous ajoutez .auth = {} à chaque page où vous souhaitez définir une session (dans votre cas Accueil)

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

Cela permet également de rediriger l'utilisateur vers la /sign-inpage

lorsque la session expire