J'utilise react-redux et j'ai actuellement une propriété booléenne isAuthenticated dans mon état global et si c'est vrai, elle redirigera vers le composant /home.

Y a-t-il une meilleure approche de celle que j'ai mise en œuvre? Comment puis-je résoudre l'erreur de sortie?

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { login } from "./actions";
import { useHistory } from "react-router-dom"

const Login = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const myState = useSelector(
    state => state.authentication
  );

  const onSubmit = (values) => {
    dispatch(login(values.email, values.password));
  };

  useEffect(() => {
    if (myState.isAuthenticated) {
      history.push("/home")
    }
  }, [isAuthenticated]);

}

Avertissement: React Hook useEffect a une dépendance manquante: 'history'. Incluez-le ou supprimez le tableau de dépendances

[isAuthenticated, history] est-ce acceptable?

0
Freddy. 26 août 2020 à 13:00

2 réponses

Meilleure réponse

Y a-t-il une meilleure approche de celle que j'ai mise en œuvre? Comment puis-je résoudre l'erreur de sortie?

La réponse dépend de l'endroit où vous gardez votre logique. Si vous conservez toute votre logique dans les états des composants, la méthode useEffect convient parfaitement.

Pour résoudre l'avertissement, placez simplement l'historique dans les entrées useEffect comme ci-dessous:

useEffect(() => {
    if (myState.isAuthenticated) {
      history.push("/home")
    }
  }, [myState.isAuthenticated, history]);

Désormais, useEffect sera déclenché chaque fois que la référence à l'objet d'historique change. Si vous utilisez React Router, alors l'instance history est très probablement mutable et elle ne changera pas et ne déclenchera donc pas le useEffect. Il devrait donc être prudent de l'inclure dans le tableau de dépendances UseEffect.

0
Ilyas Assainov 26 août 2020 à 12:33

Le meilleur moyen est toujours de créer un composant PrivateRoute distinct qui gère votre authentification. Si vous passez par la documentation officielle du routeur de réaction, ils ont donné un bon exemple d'authentification:

function PrivateRoute({ children, ...rest }) {
  const myState = useSelector(
    state => state.authentication
  );
  return (
    <Route
      {...rest}
      render={({ location }) =>
        myState.isAuthenticated ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: { from: location }
            }}
          />
        )
      }
    />
  );
}

Vous pouvez utiliser l'envelopper en couche comme ceci:

<Switch>
          <Route path="/public">
            <PublicPage />
          </Route>
          <Route path="/login">
            <LoginPage />
          </Route>
          <PrivateRoute path="/protected">
            <ProtectedPage />
          </PrivateRoute>
        </Switch>

De cette façon, vous n'avez pas à suivre manuellement votre authentification. Voici une démonstration complète du site Web de react-router: https://reactrouter.com/web/example/ auth-workflow

0
Shubham Verma 26 août 2020 à 12:39