J'ai des problèmes avec la redirection après la connexion. Comme je le sais, Fetch API n'a aucun concept pour gérer cela. J'ai essayé d'utiliser React-router-dom mais cela ne fonctionne pas. Je ne sais pas ce que je fais différemment. J'essaye d'apprendre la réaction de base, développer une application qui est entièrement authentifiée.
J'ai fait ça
<Form onSubmit={this.handleLogin}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email"
autofoccus="true"
autoComplete="new-email"
onChange= {this.ChangeText}
name="username"
value={this.state.username}
/>
</Form.Group>
<Form.Group controlId="formBasicPassword">
<Form.Label>Password</Form.Label>
<Form.Control type="password" placeholder="Password" autoComplete="new-password"
onChange= {this.ChangeText}
name="l_password"
value={this.state.l_password}
/>
</Form.Group>
<Button
onClick={this.setRedirect.bind(this)}
variant="primary" type="submit" size="lg" block>
Login
</Button>
<Form.Group controlId="formBasicChecbox">
<Form.Check type="checkbox" label="Remember" />
<a href="#" style={{float:'right', marginTop:-23}}>Forgot Password?</a>
</Form.Group>
<div id="error"></div>
<div className="clear-fix"></div>
<hr/>
</Form>
Voici l'état
setRedirect =() =>{
this.setState({
redirect: true
});
}
handleLogin =(event) =>{
event.preventDefault();
fetch('/oauth/token',
{
method: "POST",
headers:{
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`
}
)
.then(response =>
response.json()
)
.then(responseJson => {
const returnObj = responseJson;
console.log(returnObj);
sessionStorage.setItem('resData', JSON.stringify(returnObj));
console.log(this.state.redirect);
if(this.state.redirect === true){
return (
<Router><Route path="/dashboard" component={Dashboard} /></Router>
);
}
else{
<Redirect to="/" />
}
});
this.setState({
username: '',
l_password:''
});
}
L'API Fetch et la fonction setRedirect
this.state = {
redirect: false,
username: '',
l_password: ''
}
Le formulaire
import { BrowserRouter as Router, Route, Redirect} from 'react-router-dom';
import Dashboard from './Dashboard';
Ce que j'ai l'intention de réaliser est de rediriger la page vers le tableau de bord si la redirection est vraie sinon l'accueil p >
4 Réponses :
Je suppose que c'est le onclick qui se déclenche quand il est trop tard? Essayez de le définir vrai au début de votre méthode handleLogin
handleLogin = (event) => {
event.preventDefault();
this.setState({
redirect: true
});
fetch('/oauth/token',...
import { Route, Switch, Redirect } from 'react-router-dom';
https://reacttraining.com/react-router/web/api/Redirect
Ne renvoyez pas le composant Route dans votre fonction setRedirect .
Créez un Route dans votre application et définir l'état, par exemple shouldRedirect à la fin de vos appels setRedirect , par exemple
.then(responseJson => {
const returnObj = responseJson;
console.log(returnObj);
...
setState({shouldRedirect: this.state.redirect})
})
<Router>
<Route exact path="/" render={() => (
shouldRedirect ? (
<Redirect to="/dashboard"/>
) : (
<PublicHomePage/>
)
)}/>
</Router>
Vous pouvez également consulter un bel exemple de travail ici: https://reacttraining.com/react-router/web/example/auth- workflow
Comme je l'ai dit, vous ne pouvez pas retourner le composant à partir de la promesse, essayez le premier exemple très basique avec la redirection, par exemple juste une simple redirection en cliquant sur un bouton (aucune demande au serveur et ainsi de suite) et quand cela fonctionnera, commencez à ajouter votre logique
Tout d'abord, importez withRouter dans votre react-router-dom, puis ajoutez this.props.history.push ('/ dashboard') à votre fonction handleLogin après avoir satisfait aux conditions de connexion.
handleLogin =(event) =>{
event.preventDefault();
fetch('/oauth/token',
{
method: "POST",
headers:{
'Accept': 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body:`grant_type=password&username=${this.state.username}&password=${this.state.l_password}&client_id=4&client_secret=LT7raDKvPwIUrDFJBISlhpzAXu6cSYiLBGhrUmTm&scope=*`
}
)
.then(response =>
response.json()
)
.then(responseJson => {
const returnObj = responseJson;
console.log(returnObj);
sessionStorage.setItem('resData', JSON.stringify(returnObj));
....
this.props.history.push('/dashboard')
});
}
À la fin de la classe, ajoutez par défaut d'exportation avec Routeur (nom de votre classe)
Pour plus de lecture, consultez ce tutoriel. entrez la description du lien ici