La session utilisateur ne persiste pas via les hooks React

Question

Je cherche à maintenir un utilisateur connecté actuellement lors du rafraîchissement via une authentification côté serveur. J'utilise la fonction UseEffect() pour le faire, dans laquelle je vérifie lors du rafraîchissement. Mon problème est que chaque fois que je rafraîchis, mon serveur lit une session utilisateur de manière aléatoire. Cela signifie qu'un rafraîchissement ne lira aucune session, tandis que l'autre rafraîchissement lira une session utilisateur, et ainsi de suite. Je veux que mon app.js lise toujours le code pour toujours lire 'auth:true' en supposant que l'utilisateur est connecté.

Côté serveur:

---

index.js

app.use(express.json()); //Analyse du Json

app.use(cors({   //Analyse de l'origine du front-end
   origin: ["http://localhost:3000"], 
   methods: ["GET", "POST"],
   credentials: true   //Autorise les cookies à être activés
}));  

app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: true }));

 app.use(
  session({
    key: "userID",
    secret: "subscribe",    //Normalement, cela doit être long et complexe pour des raisons de sécurité
    resave: false,
    saveUninitialized: false,
    cookie: {  //Combien de temps le cookie vivra-t-il ?
      expires: 60 * 60 * 1000, //Expire après une heure
    }
  }));

 app.post('/isUserAuth', (req, res) => { //Où nous authentifions la session 

  const token = req.body.token;

  jwt.verify(token, "jwtSecret", (err, decoded) => {
    if (err) {
    res.send({auth: false, user: "Pas de jeton valide!"});
    } 
    else if (!req.session.user) {
      res.send({auth: false, user: "utilisateur vide"});
      console.log(req.session.user)
    }
    else  { //Sinon, si l'utilisateur est vérifié, nous envoyons une authentification confirmée et les données utilisateur
    res.send({auth: true, user: req.session.user});
    console.log(req.session.user)
    }
})
});

Côté client:

---

app.js

const userAuthToken = localStorage.getItem('token'); 

  useEffect(() => { //Rester connecté, si l'utilisateur est connecté, après le rafraîchissement
    Axios.post("http://localhost:3001/isUserAuth", {   //Point final de la demande de création
    token: userAuthToken

    }).then(response => {
      if (!response.data.auth) { //Vérification du statut d'authentification
        setAuthStatus(false); //L'utilisateur n'est pas connecté !
        console.log("PAS CONNECTÉ!");
        console.log(response.data.user);
       } else {
        setAuthStatus(true);      //L'utilisateur est connecté à la session !
        console.log("CONNECTÉ!");
        console.log(response.data.user);
       }
    })
  }
  ,[]);

Answer 1

Le problème ici est que vous n'envoyez pas les identifiants du client via la requête Axios. Puisque votre application serveur a `credentials: true`, vous devriez faire la même chose du côté client.

Ma suggestion est d'ajouter {withCredentials: true} à votre Hook côté client.

  useEffect(() => { 

    const token = localStorage.getItem('token');

    Axios.post("http://localhost:3001/isUserAuth", {  
    token: token, 
    },{withCredentials: true} /*< {
      if (!response.data.auth) { 
        setAuthStatus(false); 
        console.log("PAS CONNECTÉ !");
        console.log(response.data.user);
       } else {
        setAuthStatus(true);  
        console.log("CONNECTÉ !");
        console.log(response.data.user);
       }
    })
  }
  ,[]);

Answer 2

Cela est dû à votre userToken étant indéfini lors du rechargement. Consultez cette question connexe sur l'obtention permanente du jeton à partir du stockage local.