web-dev-qa-db-fra.com

Quel est le meilleur moyen de gérer la session d'un utilisateur dans React?

J'ai un doute sur la façon de gérer la session d'un utilisateur dans React. Par exemple, dans MVC .NET, vous ne faites que cela à l'aide de l'objet Session (par exemple, Session["test"] = "";), mais évidemment, React ne peut pas le faire.

Je lisais sur l'utilisation de l'état du composant, je suppose que cela définit l'état sur le composant principal et le transmet à d'autres composants à l'aide d'accessoires. De plus, j'ai vu des gens recommander l'utilisation de la localStorage ou des cookies du navigateur, mais je ne sais pas s'il s'agit d'une bonne idée ou d'une bonne pratique. 

Existe-t-il un meilleur moyen de gérer les variables de session dans React que localStorage ou les cookies?

sessionreactjs
14
ernesto petit

J'éviterais d'utiliser l'état de composant car cela pourrait être difficile à gérer et sujet à des problèmes qui peuvent être difficiles à résoudre. 

Vous devez utiliser soit cookies ou localStorage pour conserver les données de session d'un utilisateur. Une autre option consiste à utiliser une fermeture comme enveloppe autour de votre cookie ou localStorage. 

Voici un exemple simple d'une fermeture UserProfile qui contiendra le nom de l'utilisateur.

var UserProfile = (function() {
  var full_name = "";

  var getName = function() {
    return full_name;    // Or pull this from cookie/localStorage
  };

  var setName = function(name) {
    full_name = name;     
    // Also set this in cookie/localStorage
  };

  return {
    getName: getName,
    setName: setName
  }

})();

export default UserProfile;

Lorsqu'un utilisateur se connecte, vous pouvez renseigner cet objet avec un nom d'utilisateur, une adresse électronique, etc. 

import UserProfile from './UserProfile';

UserProfile.setName("Some Guy");

Vous pouvez ensuite obtenir ces données à partir de n’importe quel composant de votre application si nécessaire.

import UserProfile from './UserProfile';

UserProfile.getName();

L'utilisation d'une fermeture permet de conserver les données en dehors de l'espace de noms global et de les rendre facilement accessibles depuis n'importe où dans votre application. 

11
grizzthedj

Ce n'est pas la meilleure façon de gérer les sessions. Vous pouvez utiliser des jetons Web pour chiffrer les données que vous souhaitez sauvegarder. Vous pouvez utiliser plusieurs services disponibles. Le plus populaire est jetons Web JSON (JWT) avec jetons Web. vous pouvez vous déconnecter après un certain temps s'il n'y a aucune action du client. Après avoir créé le jeton, vous pouvez le stocker dans votre stockage local pour en faciliter l'accès.

jwt.sign({user}, 'secretkey', { expiresIn: '30s' }, (err, token) => {
    res.json({
      token
  });

objet utilisateur ici correspond aux données utilisateur que vous souhaitez conserver dans la session 

localStorage.setItem('session',JSON.stringify(token));
0
kirito