Implémentation de la gestion de la redirection après la connexion à Firebase dans React
P粉567112391
2023-09-02 15:12:02
<p>J'essaie d'implémenter la fonctionnalité de connexion à l'aide de l'authentification Firebase dans mon application React. Je parviens à authentifier l'utilisateur avec son e-mail et son mot de passe, mais je ne parviens pas à gérer correctement la redirection de l'utilisateur vers la page d'accueil après la connexion. </p>
<p>Voici le composant de mon formulaire de connexion : </p>
<pre class="brush:js;toolbar:false;">import { useState } depuis 'react';
importer { useFirebase } depuis 'react-redux-firebase' ;
const LoginForm = () =>
const [email, setEmail] = useState('');
const [mot de passe, setPassword] = useState('');
const firebase = useFirebase();
const handleSubmit = (e) =>
e.preventDefault();
firebase.login({
e-mail,
mot de passe
})
}
retour (
<form onSubmit={handleSubmit}>
<input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="Email" />
<input type="mot de passe" value={mot de passe} onChange={e => setPassword(e.target.value)} placeholder="Mot de passe" />
<type de bouton="soumettre">Connexion</bouton>
</formulaire>
)
}
exporter le formulaire de connexion par défaut ;
≪/pré>
<p>Comment gérer la redirection de l'utilisateur vers la page d'accueil après une connexion réussie ? </p>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Si vous utilisez React Router Dom, vous pouvez utiliser la redirection dans React Router Dom après l'authentification de l'utilisateur. https://reactrouter.com/en/main/fetch/redirect
Par exemple :
import { redirect } from "react-router-dom"; firebase.login({ email, password }).then(()=> redirect("/homeppage")); }