Comment sauvegarder un utilisateur authentifié dans un état en utilisant Redux et React ?

Question

Je suis nouveau dans le domaine de Redux, et je n'ai vraiment pas beaucoup de temps à consacrer à la recherche, alors j'apprécierais que vous puissiez m'aider. Donc, fondamentalement, j'ai un composant React où j'authentifie un utilisateur avec une requête HTTP vers un backend. Lorsque je reçois la réponse en retour, je veux que les données soient enregistrées dans un magasin Redux afin que je puisse y accéder sur d'autres composants / routes. Comment cela peut-il être fait ? Merci.

C'est mon composant :

class Register extends Component {
  constructor(props) {
    super(props);

    this.state = {
      errorMessage: null,
      user: null
    };
  }

  register = (event) => {
    event.preventDefault();

    console.log(event.target.email.value);
    let errorMessage = null;
    if (!event.target.name.value) errorMessage = 'Numele este obligatoriu.';
    else if (!event.target.email.value)
      errorMessage = 'Email-ul este obligatoriu.';

    else {
      const body = {
        name: event.target.name.value,
        email: event.target.email.value,
        password: event.target.password.value,
        confirmPassword: event.target.confirmPassword.value
      };

      return axios
        .post('http://localhost:5000/api/v1/auth/register', body)
        .then((response) => {
          console.log(response);
          this.setState({ // Instead of this, the user should be stored using Redux
            user: response.data.data.user
          });

        })
        .catch((error) => {
          this.setState({ errorMessage: error.response.data.message });
        });
    }
    this.setState({ errorMessage });
  };

  render() {
    return (
      <div className="register-page">
        <form onSubmit={this.register}>
          <h3>Cont nou</h3>
          <input type="text" placeholder="Nume" name="name" />
          <input type="text" placeholder="E-mail" name="email" />
          <input type="password" placeholder="Parola" name="password" />
          <input
            type="password"
            placeholder="Confirma parola"
            name="confirmPassword"
          />
          <span className="error-message">{this.state.errorMessage}</span>
          <input type="submit" value="Trimite" name="submit" />
        </form>
      </div>
    );
  }
}

export default Register;

Answer 1

Le moyen le plus rapide pour sauvegarder l'état d'authentification d'un utilisateur est d'utiliser la fonction useContext crochets.

• créer un Authcontext.js et définissez ce que vous aurez dans votre contexte (mais juste le type de données, vous pouvez voir que nous n'avons pas besoin de définir le fichier setIsAuthenticated ici.

  import React from 'react';

  export default React.createContext({ isAuthenticated: false, setIsAuthenticated: (value) => {}, });

• Dans votre composant principal, vous pouvez maintenant envelopper toute votre application avec le Contexte. Nous définissons le setIsAuthenticated et la valeur initiale de la fonction isAuthenticated ici.

  const App = () => {

  const [isAuthenticated, setIsAuthenticated] = useState(AuthAPI.setupUser());

  return ( <AuthContext.Provider value={{ isAuthenticated, setIsAuthenticated }}>

  <AppContent />
  
  </AuthContext.Provider>

  ); };

  ReactDOM.render(<App/>, document.getElementById('app'));

  export default App;

Comme le contexte est un état global (comme redux), vous pouvez également obtenir le contexte de chaque composant, par exemple.

import React, { useContext } from 'react';

const Logout = () => {
  const { setIsAuthenticated } = useContext(AuthContext);

  const logout = () => {
        AuthAPI.logout();
        setIsAuthenticated(false);
    };

   return(...)

Pour déterminer si l'utilisateur est connecté, vous devez construire votre propre logique, mais si vous utilisez jwt, la fonction setupUser pourrait être quelque chose comme ça. Il serait appelé à chaque fois que l'application démarre pour configurer axios pour votre appel api par exemple et retourner le statut de l'utilisateur.

function setupUser() {
  // check if token exist
  const token = window.localStorage.getItem('authToken');
  if (token) {
    const { exp: expirationDate } = jwtDecode(token);

    if (expirationDate * 1000 > new Date().getTime()) {
      axios.defaults.headers['Authorization'] = 'Bearer ' + token;
      return true;
    } 
  } 
  return false;
}