comment attendre que localStorage.setItem se termine en angle 4
je développe une application angulaire 4. Une fois que l'utilisateur souhaite se connecter au système, il envoie une requête http au serveur. Le serveur valide l'utilisateur et envoie un repos avec une clé d'authentification et d'autres informations sur l'utilisateur. J'utilise le stockage local pour enregistrer ces informations
login() {
if (this.loginForm.valid) {
this.serviceUserService.authenticate(this.loginForm).subscribe(response => {
if (response.message != "_err") {
//saving the current user in localstorage
localStorage.setItem('currentUser', JSON.stringify(response.body));
this.router.navigateByUrl('/');
} else {
alert("invalid login. Please try again")
}
}, err => {
console.log(err);
})
}
}
il semble que localStorage.setItem() soit une fonction asynchrone. donc avant de sauvegarder l’utilisateur actuel dans le stockage local, il le redirige vers la page principale. mais puisque le jeton n'est pas enregistré dans le stockage local, aucune requête http ne fonctionnera. Comment puis-je attendre jusqu'à ce que localStorage.setItem() termine sa tâche, puis envoie l'utilisateur à la page d'accueil.
Au cas où quelqu'un aurait le même type de problème ... la raison en était que j'ai créé une variable dans ma classe de service pour enregistrer l'utilisateur actuel et définir la valeur de cette variable dans le constructeur. Ainsi, dans la page de connexion lorsque la méthode authenticate est appelée, elle tente d’initialiser la variable, mais étant donné que l’utilisateur n’est pas encore connecté, il reste toujours null. C'était la cause du problème.
Vous vous trompez, tous les appels localStorage sont synchrone . Vous pouvez probablement ajouter une vérification avant de passer à la page suivante.
localStorage.setItem('currentUser', JSON.stringify(response.body));
this.router.navigateByUrl('/');