web-dev-qa-db-fra.com

Comment obtenir l'ID utilisateur actuel angular 4?

Je dois obtenir l'ID utilisateur actuel pour l'utiliser dans différentes parties de mon application.

login.component.ts:

onSignin(form: NgForm){
const UserName = form.value.UserName;
const Password = form.value.Password;
this.authService.signinUser(UserName,Password).map(res => res.json())
 .subscribe(
   data => {
     if (data.Id == 0){
     this.invalid=true;
    }
    else{
      localStorage.setItem('isLoggedin', 'true');
      this.router.navigate(['/calendar']);
      console.log('Ok');
   }})}

auth.service.ts:

signinUser(UserName,Password): Observable<any>{
  return this.http.get('http://api.##.com/api/security/signin?username='+UserName+'&password='+Password);
}
angulartypescriptuserid
4
Aya Abdelaziz

Vous pouvez passer le jeton depuis le backend qui contiendra l'identifiant ou vous pouvez utiliser le magasin redux qui stockera l'identifiant sur le frontal pour que votre application l'utilise. Ci-dessous le lien pour le paquet ng2 Redux en angulaire. https://www.npmjs.com/package/ng2-redux Il y a aussi une option pour l'enregistrer dans le stockage local mais je ne le préférerai pas. Ou vous pouvez utiliser le stockage de session pour enregistrer les données à l'avant comme ça

enregistrer dans la session dans votre fichier de composant de connexion utilisez ce code

sessionStorage.setItem('id', data.id);
retrieving from the session//
var data = sessionStorage.getItem('id');
console.log(data) to see the id in the console
3
Abhishek Singh

Vous souhaitez utiliser l'ID utilisateur obtenu lors de l'appel de service à différents composants de votre application. J'espère que c'est ce que vous recherchez.

Il existe trois façons de procéder.

  1. Services partagés - Utilisez un service partagé, ajoutez l'ID utilisateur à un objet d'ID utilisateur dans le service et configurez-le à l'heure de connexion. La prochaine fois que l'ID utilisateur sera modifié, le composant d'observation sera notifié.
  2. [~ # ~] ngrx [~ # ~] - Une mise en œuvre beaucoup plus propre du service partagé, je vous suggère de utilisez-le si votre application est énorme.
  3. Stockage local - c'est très discutable car cela dépend aussi de la discrétion des utilisateurs. Définissez et obtenez l'ID utilisateur entre les composants.

Notez que si l'utilisateur actualise la page à tout moment dans NGRX ou les services partagés, les données seront perdues, vous devrez peut-être utiliser le stockage local pour une vérification complète.

2
Rahul Singh