J'utilise localStorage pour le jeton d'authentification.
pour l'enregistrer, j'utilise localStorage.setItem ('token', 'value') et pour le supprimer, j'utilise localStorage.clear () et les deux fonctionnent très bien. Mais quand je me suis connecté avec un autre utilisateur, le constructeur du service est jusqu'à envoyer le jeton précédent qui est en fait supprimé de localStorage () .
le constructeur du service est sous
onLogout() {
localStorage.removeItem('eq_user');
localStorage.clear();
this.authService.logout().subscribe( s => {
this.route.navigate(['login']);
});
}
Connexion:
login() {
this.auth.login(data).subscribe((response: UserToken) => {
localStorage.setItem('eq_user', JSON.stringify(response));
this.router.navigate([this.returnUrl]);
},
error => {
this.error = true;
this.errorMsg = error.message;
}
}
Déconnexion
token: string;
constructor(private http: HttpClient) {
const user = JSON.parse(localStorage.getItem('eq_user'));
if ( user ) {
this.token = user.access_token;
}
}
ce qui suit est lien identique à mon problème.
Cliquez d'abord sur setValue puis cliquez sur A à partir du composant et A à partir du service, la première fois, cela prendra le valeur correcte. Mais lorsque vous cliquez à nouveau sur setValue, puis cliquez sur les deux autres boutons, le bouton Component renvoie une nouvelle valeur mais le service ne renvoie pas les nouvelles valeurs.
3 Réponses :
Vous voyez, les services angulaires sont des services singleton lorsqu'ils sont déclarés en root. Ainsi, votre constructeur ne sera appelé qu'une seule fois et à ce moment-là, il stockera le jeton. Ainsi, lorsque vous effacez le stockage local, vous devez effacer la variable. Vous pouvez créer une fonction clear dans votre service pour effacer la variable de jeton. Et appelez cette fonction lorsque vous vous déconnectez.
disons que je suis sur le module de tableau de bord et que je clique sur déconnexion, puis je me connecte avec un autre compte, dans ce cas, le module de tableau de bord a le jeton précédent mais lorsque je clique sur une autre route de module, il a un nouveau jeton, je ne comprends pas comment gérer il.
Pouvez-vous recréer le problème sur stackblitz?
J'ai recréé un problème identique sur stackblitz, le scénario de lien et de cas est disponible dans la question.
Le constructeur d'un service singleton n'est appelé qu'une seule fois pendant le chargement de l'application. Je suppose que votre service est unique. Ainsi, la logique écrite à l'intérieur du constructeur ne s'exécutera pas plus d'une fois. Vous devez également définir le jeton dans la méthode de connexion, qui s'exécute chaque fois qu'un utilisateur se connecte. Supprimez également le jeton lorsque l'utilisateur se déconnecte.
login() {
this.auth.login(data).subscribe((response: UserToken) => {
this.token = response.access_token;
localStorage.setItem('eq_user', JSON.stringify(response));
this.router.navigate([this.returnUrl]);
},
error => {
this.error = true;
this.errorMsg = error.message;
}
}
onLogout() {
this.token = null;
localStorage.removeItem('eq_user');
localStorage.clear();
this.authService.logout().subscribe( s => {
this.route.navigate(['login']);
});
}
J'ai mis à jour votre exemple de code stackblitz avec les modifications que j'ai mentionnées ci-dessus - https://stackblitz.com/edit/angular-cz5huh
le résultat est toujours le même. Je n'ai vu aucune modification du code, sauf l'ajout de AuthService dans les fournisseurs app.module.ts
Après avoir passé presque une journée à envoyer le nouveau jeton, je trouve la solution qui peut être facilement réalisée en utilisant HttpInterceptor , si vous définissez un intercepteur personnalisé pour les en-têtes, vous ne le faites pas besoin de rechercher un jeton dans votre service, l'intercepteur ajoutera le jeton porteur à toutes les requêtes http.
la classe d'exportation AuthInterceptor implémente HttpInterceptor {intercept (req: HttpRequest
ajoutez le provide: HTTP_INTERE3CEPTOR, useClass: AuthInterceptor en tant que fournisseur dans app.module.ts
un nouveau jeton est envoyé lorsque la page est rechargée.
selon votre code, le service stocke le jeton à partir du stockage local dans son champ de propriété. vous devez donc effacer cette propriété de votre service.
Veuillez fournir le code dans lequel vous définissez et supprimez le jeton du stockage local?
J'ai édité la question et ajouté les fonctions de connexion et de déconnexion
@DPro Je ne sais pas comment effacer une propriété de service? pouvez-vous guider un peu!