J'ai stocké mon statut de connexion utilisateur dans l'état. lorsque j'actualise ma page, l'état initialisé et le jeton jwt est dans localstorage.now, mon application affiche l'utilisateur non connecté mais, lorsque je fais une demande, il obtient le jeton jwt de localstorage et complète les demandes protégées.

Je veux mettre à jour mon état lorsque j'actualise la page. laissez savoir la solution. tout mon projet - https://codesandbox.io/s/react-library-fe- 7p8rf

0
Maruth51 9 mai 2020 à 18:57

3 réponses

J'ai eu la même question, voici ce que j'ai fait,

  1. J'ai créé une route dans mon serveur api qui valide le jeton et renvoie l'objet utilisateur, par exemple: /auth/validate
  2. J'ai créé une action nommée validateToken dans mon application de réaction, dans cette route, je récupère le jeton de localstorage et je l'envoie au serveur /auth/validate et stocke l'utilisateur renvoyé par le serveur dans mon état.
  3. Dans le composant d'application, j'appelle cette fonction dans useEffect() sur componentDidMount()

Ainsi, une fois la page rechargée, l'application enverra alors la demande au serveur avec le jeton jwt de localstorage et le serveur retournera l'objet utilisateur. Vous pouvez également afficher le chargeur pendant qu'il envoie la demande :)

0
Syed Zubair Ahmed 9 mai 2020 à 16:09

Vous pouvez mettre à jour votre état de cette façon lorsque l'utilisateur a actualisé la page:

// UserContext.js

case "SET_USER":
      return { ...state, isLoggedIn: localStorage.getItem("jwt") ? true : false };
0
Skoltz 9 mai 2020 à 16:16

Obtenir les informations de connexion dans useEffect et définir les données loginUser sur votre état

useEffect(() => { let loginUser= window.localStorage.setItem("jwt", res.jwt); });

0
Sjs Ahd 9 mai 2020 à 16:22