Une application réactive est créée avec la connexion avec Google Options utilisant FireBase. L'APP doit suivre le nombre de tentatives infructueuses de connexion à Redux et si l'utilisateur entre dans un mot de passe incorrect plus de deux fois, affichez le composant reCAPTCHA.
À l'heure actuelle, le composant RECAPTCHA charge chaque fois que la page est chargée. Il ne faut charger que lorsque l'utilisateur entre dans un mot de passe incorrect plus de 2 fois. P>
Page de connexion: P>
const initialState = {
failedLoginAttempts: 0
};
export default (state = initialState, { type, payload }) => {
switch (type) {
case 'UPDATE_LOGIN_ATTEMPTS':
return {
...state,
failedLoginAttempts: //how to increment the count by 1??
};
default:
return state;
}
}
3 Réponses :
ÉLIMANDLOGINATRESSEMENTS: // Comment incrémenter le nombre de 1 ?? p>
Utilisez simplement la valeur actuelle de
State.failedloginatemps code> et ajoutez 1: p>xxx pré> Utiliser
MapStatetoprops code> pour mapper ÉLIMANDLOGINATTECTS CODE> AS PROP. Ensuite, utilisez-le pour montrer le CAPTCHA. P>mapStateToProps(state) { return { failedLoginAttempts: state.failedLoginAttempts, } } render () { if (props.failedLoginAttempts > 2) { // show captcha return <Captcha />; } }
Merci, ça a fonctionné. Comment charger le composant reCAPTCHA uniquement lors de la liaison échouée> 2?
@Sneh La mise à jour montre simplement la logique de base Comment afficher CAPTCHA lorsque ÉLACÉLOGINATRESSEMENTS> 2
Vous pouvez le faire par incrément compter de la précédente:
const initialState = {
failedLoginAttempts: 0
};
export default (state = initialState, { type, payload }) => {
switch (type) {
case 'UPDATE_LOGIN_ATTEMPTS':
return {
...state,
failedLoginAttempts: state.failedLoginAttempts+1 //Update attempt from last one
};
default:
return state;
}
}
Vous n'avez pas attaché le fichier action.js, mais à mon avis, la meilleure façon d'écouter quoi que ce soit échoué à Redux est {Catch} l'action -
puis dans le réducteur
Le code de réducteur ci-dessus fonctionne lorsque nous l'envoions lorsque le courrier électronique / mot de passe est faux. En cas de connexion avec Google où FireBaseUI Composant est utilisé, comment expédier?