Menu navigation adapté à l'utilisateur : bonnes pratiques?

Version imprimable

Voir 40 message(s) de cette discussion en une page

Code:

1
2
3
4
5
6
 ngOnInit(): void {
  this.subLogin = this.authService.currentUser$.subscribe((user: UserAccount) => {
    this.loggedUser = user;
  });
 
  console.log('From Home : ' + JSON.stringify(this.loggedUser, null, 4)) /: marchera pas

subscribe = async

te manques les bases

J'ai repris l'exemple donné par dukoid https://iner-dukoid.developpez.com/t...angular/#LXXIX

J'ai déplacé dans le login component le chargement de la navigation

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
onSubmit() {
      this.subLogin = this.authService.LogIn(this.f.login.value, this.f.password.value).subscribe((user: UserAccount) => {
      user.isLogged   = true;
      this.loggedUser = user;
 
      if(Object.keys(this.loggedUser).length!= 0){
        let userAccountTypeId = this.loggedUser.userAccountTypeId.valueOf();
        let truckId = this.loggedUser.truckId?.valueOf();
 
        this.subNavigation = this.authService.getNavigation(userAccountTypeId).subscribe((navigation: Navigation[]) =>{
        this.loggedUser.navigation = navigation;
        this.router.navigate([`/useraccount/${truckId}`]);
      });
    }
    else{
      this.subNavigation = this.authService.getNavigation(4).subscribe((navigation: Navigation[]) =>{
      this.loggedUser.navigation = navigation;
    });
    }
 
      this.authService.updateAndEmitCurrentUser(user);
      this.cancelEvent.emit(true);
    }
    ); 
  }

Dans mon header component je souscris au currentUser$: Observable<UserAccount> de AuthService. J'ai donc dans le ngOnInit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
ngOnInit() : void{
      this.currentUser$ = this.authService.getCurrentUserObs();
      this.subCurrentUserObs = this.currentUser$.subscribe((user: UserAccount) => {
        this.loggedUser = user;
 
      if(Object.keys(this.loggedUser).length!= 0){
        let userAccountTypeId = this.loggedUser.userAccountTypeId.valueOf();
        let truckId = this.loggedUser.truckId?.valueOf();
 
        this.subNavigation = this.authService.getNavigation(userAccountTypeId).subscribe((navigation: Navigation[]) =>{
        this.loggedUser.navigation = navigation;
        this.router.navigate([`/useraccount/${truckId}`]);
      });
    }
    else{
      this.subNavigation = this.authService.getNavigation(4).subscribe((navigation: Navigation[]) =>{
      this.loggedUser.navigation = navigation;
    });
    }
    })
  }

Cela fonctionne, je suis bien redirigé vers la page renseignée avec le bon menu de navigation.

Mais lorsque je change de page et que j'arrive sur la home page. Le menu se réinitialise. En fait il repasse dans le ngOnInit du header mais considère que this.loggedUser est vide.

J'ai donc ajouté dans le home component ceci :

Code:

1
2
3
4
5
6
7
8
 
...
currentUser$: Observable<UserAccount>;
...
 
ngOnInit(): void {
    this.currentUser$ = this.authService.getCurrentUserObs();
  }

en souscrivant aussi à l'observable mais il considère toujours dans le header component que le loggedUser est vide

Citation:

Envoyé par krakatoa

Code:

1
2
3
4
5
6
 ngOnInit(): void {
  this.subLogin = this.authService.currentUser$.subscribe((user: UserAccount) => {
    this.loggedUser = user;
  });
 
  console.log('From Home : ' + JSON.stringify(this.loggedUser, null, 4)) /: marchera pas

subscribe = async

te manques les bases

J'ai ajouté dans le header html le async

Code:

1
2
 
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3" *ngIf="(currentUser$ | async) as UserAccount">

Code:

1
2
3
4
5
 ngOnInit(): void {
  this.subLogin = this.authService.currentUser$.subscribe((user: UserAccount) => {
    this.loggedUser = user;
    console.log('From Home : ' + JSON.stringify(this.loggedUser, null, 4)) 
  });

09/10/2021, 20h24
paintbox

J'ai beau souscrire à this.currentUser$ = this.authService.getCurrentUserObs(); sur ma home page et sur mon header component, il perd le loggedUser dès que je change de page

Code:

1
2
3
4
5
ngOnInit(): void {
  this.subLogin = this.authService.currentUser$.subscribe((user: UserAccount) => {
    this.loggedUser = user;
    console.log('From Home : ' + JSON.stringify(this.loggedUser, null, 4)) 
  });

SI TU MET ca ds les 2 pages
le console log est bon dans les 2?

Bonjour, je pense que j'ai peut-être mal expliqué ce que je souhaite faire ou peut être que je comprend mal le principe des observables ou je les utilise mal.
Je vais donc essayer de réexpliquer.

Lorsque le visiteur arrive sur le site, il n'est pas identifié et le menu est basique.

Lorsqu'il s'identifie, les infos de l'utilisateur ainsi que le menu correspondant à son "type d'utilisateur" (il y a plusieurs types d'utilisateurs) sont chargés.

Mon header qui est un composant séparé affiche le menu récupéré de la db ainsi que le nom de la personne qui s'est identifiée.
Une fois identifié le menu ne doit plus changer. Ce n'est que s'il se déloge, que le menu revient à son état basique.

Par contre je dois pouvoir utiliser les données de l'utilisateur sur les autres pages. Certaines informations de celui-ci interviennent dans les requêtes que je fais à la db.

C'était pour cette raison qu'à la base je stockais ces données dans des variables de session.

Pour l'instant en utilisant les observables j'en suis au stade suivant.
Lorsque l'utilisateur se logge depuis la page login il est identifié, ses données son chargées ainsi que le menu de navigation. Il est redirigé vers une autre page. Le header affiche donc le bon menu ainsi que son nom.

Le problème que je rencontre c'est que si je change de page, je reviens à l'état initial càd celui où l'utilisateur n'est pas loggé. Toutes les données sont perdue malgré que je souscrits à l'obserable du authService comme ceci:

Code:

this.subCurrentUserObs = this.currentUserSubject$.subscribe((user: UserAccount) => {this.loggedUser = user;}

Je devrais en principe récupérer les données de l'utilisateur. Ce n'est pas le cas. Lorsqu'il repasse dans le ngOnInit du header et que je teste si loggedUser est vide

Code:

if(Object.keys(this.loggedUser).length!= 0)

il considère qu'il est vide et tombe dans le else => et donc menu basique.

Voici mon code pour l'instant.

le Auth Service :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
@Injectable({providedIn: 'root'})
 
export class AuthService {
  public isloggedIn  : boolean = false;
  public user  : UserAccount;
  public navigations : Navigation [] = [];
  private error       : string = '';
  public errorMessage: string ='';
 
  private currentUserSubject$ = new BehaviorSubject<UserAccount>({} as UserAccount);
  public currentUser$: Observable<UserAccount>;
 
constructor( private http: HttpClient) { 
              this.currentUser$ = this.currentUserSubject$.asObservable();
            }
 
 
public get currentUserValue(): UserAccount {                 
  return this.currentUserSubject$.getValue();
}            
 
public get currentUserSubjectValue(): UserAccount{
  return this.currentUserSubject$.getValue();
}
 
 
getCurrentUserSubject(): BehaviorSubject<UserAccount> {      
  return this.currentUserSubject$;
}
 
 
getCurrentUserObs(): Observable<UserAccount> {               
  return this.currentUser$;
}
 
LogIn(login: string, password : string): Observable<UserAccount>{
  let apiUserAccount: string = environment.apiAddress + 'UserAccount/' + 'Login?' + 'login=' + login + '&' + 'password=' + password;
    return this.http.get<UserAccount>(apiUserAccount);
}
 
getNavigation(accountTypeId: number) : Observable<Navigation[]> {
  let apiNavigation: string = environment.apiAddress + 'NavigationByUser/' + accountTypeId;
  return this.http.get<Navigation[]>(apiNavigation);
}
 
logout() {
  const user = {} as UserAccount;        
  this.updateAndEmitCurrentUser(user);   
}
 
isLogged(): Observable<boolean> {
  return this.currentUser$.pipe(
    map((user: UserAccount) => <boolean>user.isLogged),   
    take(1)
  );
}
 
updateCurrentUser(user: UserAccount) {
  this.updateAndEmitCurrentUser(user);
}
 
updateAndEmitCurrentUser(user: UserAccount) {
  localStorage.setItem("currentUser", JSON.stringify(user));      
 
  this.currentUserSubject$.next(user);     
}
 
// Error
handleError(error: HttpErrorResponse) {
  if (error.error instanceof ErrorEvent) {
    // client-side error
    console.log('client-side error')
    return throwError(error.error.message);
  }
  // server-side error
  console.log('server-side error')
  return throwError(error);
}
}

Le code du component login :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
export class LoginComponent implements OnInit {
  loginForm: FormGroup;
  submitted = false;
  returnUrl    : string;
  error        : string;
  errorMessage : string;
  subLogin     : Subscription;
  subNavigation: Subscription;
 
  loggedUser   : UserAccount;
  navigation   : Navigation[];
 
  @Output() cancelEvent = new EventEmitter<boolean>(); 
 
  constructor(private authService: AuthService,
              private route      : ActivatedRoute,
              private router: Router,
              private formBuilder: FormBuilder) {
        this.loginForm = new FormGroup({
          login: new FormControl(),
          password: new FormControl()
    });
  }
 
  ngOnInit() {
    this.getFormFields();
    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
  }
 
  get f() { return this.loginForm.controls; }
 
  onSubmit() {
    this.subLogin = this.authService.LogIn(this.f.login.value, this.f.password.value).subscribe((user: UserAccount) => {
      user.isLogged   = true;
      this.loggedUser = user;
 
      if(Object.keys(this.loggedUser).length!= 0){
        let userAccountTypeId = this.loggedUser.userAccountTypeId.valueOf();
        let truckId = this.loggedUser.truckId?.valueOf();
 
        this.subNavigation = this.authService.getNavigation(userAccountTypeId).subscribe((navigation: Navigation[]) =>{
        this.loggedUser.navigation = navigation;
        this.router.navigate([`/useraccount/${truckId}`]);
      });
    }
    else{
      this.subNavigation = this.authService.getNavigation(4).subscribe((navigation: Navigation[]) =>{
      this.loggedUser.navigation = navigation;
    });
    }
 
      this.authService.updateAndEmitCurrentUser(user);
      this.cancelEvent.emit(true);
    }
    ); 
  }
 
  getFormFields(){
    this.loginForm = this.formBuilder.group({
      login: ['', Validators.required],
      password: ['', Validators.required]
    });
  }
 
  cancel() {
    this.cancelEvent.emit(true);
  }
 
  ngOnDestroy(): void {
    if (this.subLogin) {
      this.subLogin.unsubscribe();          
    }
  }
}

Le code du component Header :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
ngOnInit() : void{
     this.currentUserSubject$ = this.authService.getCurrentUserSubject();
     this.subCurrentUserObs = this.currentUserSubject$.subscribe((user: UserAccount) => {
            this.loggedUser = user;
 
     if(Object.keys(this.loggedUser).length!= 0){
      let userAccountTypeId = this.loggedUser.userAccountTypeId.valueOf();
      let truckId           = this.loggedUser.truckId?.valueOf();
 
      this.subNavigation = this.authService.getNavigation(userAccountTypeId).subscribe((navigation: Navigation[]) =>{
      this.loggedUser.navigation = navigation;
      this.router.navigate([`/useraccount/${truckId}`]);
    });
  }
  else{
    this.subNavigation = this.authService.getNavigation(4).subscribe((navigation: Navigation[]) =>{
      this.loggedUser.navigation = navigation;
    });
  }
  });
  }

Dans le code html du header je fais :

Code:

1
2
3
<div class="navbar-collapse collapse w-100" id="collapsingNavbar3" *ngIf="(currentUser$ | async) as UserAccount">
... affichage du menu et nom utilisateur
</div>

J'espère que c'est un peu plus clair.
Merci pour votre aide.

10/10/2021, 13h09
krakatoa
Code:

1 2 if(Object.keys(this.loggedUser).length!= 0)
Code:

IF (this.loggedUser && this.loggedUser.islogged) {

met des coonsole log partout
il n y a pas de raison
10/10/2021, 13h23
paintbox

J'ai mis des console log un peu partout notamment dans le header. Et l'objet loggedUser est = à {}
10/10/2021, 16h25
dukoid

https://stackblitz.com/edit/angular-ivy-auth-test

je ne peux pas faire plus !

faut apprendre les bases sinon tu vas toujours galérer

Voir 40 message(s) de cette discussion en une page