Discussion :

[paintbox]

Bonjour,

Dans mon projet, le menu de navigation est différent en fonction du type d'utilisateur. Ces utilisateurs sont par exemple "Anonyme", "Client" ou "Administrateur" en fonction du type le menu doit s'adapter.
La configuration du menu est définit dans la base de donnée.

De plus, lorsque un utilisateur se connecte, son username apparaît dans le menu.
Pour cela j'ai créé un auth.service qui contient 2 EventEmitter. Un pour logger l'utilisateur et l'autre qui charge le menu correspondant.
Voici le code de ce service :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
export class AuthService {
  public isloggedIn  : boolean = false;
  public loggedUser  : UserAccount;
  public navigations : Navigation [] = [];
  private error       : string = '';
  public errorMessage: string ='';
 
  @Output() getLoggedUser: EventEmitter<any> = new EventEmitter();
  @Output() getUserNavigation: EventEmitter<any> = new EventEmitter();
 
constructor(private repository: RepositoryService,
            private errorHandler: ErrorHandlerService, 
            private session: SessionService, 
            private http: HttpClient, 
            private router: Router) { }
 
 
LogIn(login: string, password : string): Observable<boolean>{
  var result: boolean = false;
  let apiUserAccount: string = environment.apiAddress + 'UserAccount/' + 'Login?' + 'login=' + login + '&' + 'password=' + password;
     this.http.get<UserAccount>(apiUserAccount)
      .subscribe(response => {
        this.loggedUser = response as UserAccount;
        this.getLoggedUser.emit(this.loggedUser);
        this.session.Save('isLoggedIn',JSON.stringify(true)); 
        this.session.Save('loggedUser', response as UserAccount);
        this.getNavigation();
        result = true;
      }),
      (error) =>{
        this.error = error;
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      }
      return of(result);
}
 
getNavigation = () => {
  var id;
  if(this.loggedUser != undefined){
    id = this.loggedUser.id;
  }
  else{
    id = UserAccountTypeEnum.Customer;
  }
  let apiNavigation: string = environment.apiAddress + `NavigationByUser/${id}`;
  this.repository.getData(apiNavigation)
    .subscribe(response => {
      this.navigations = (response as Navigation[]);
      this.navigations.sort((a, b) => a.sequence - b.sequence);
 
      this.getUserNavigation.emit(this.navigations);
    });
}
 
LogOut() {
  this.getLoggedUser.emit('Sign Out');
  this.session.Clear();
  this.getNavigation();
  }
}

Mon menu est dans un composant indépendant et appel ce service. Il souscrit également aux 2 EventEmitter :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
export class HeaderComponent implements OnInit {
  private navigations: Navigation[] = [];
 
  public  loggedUser : UserAccount;
  public  isLoggedIn : boolean = false;
  public  type       : UserAccountTypeEnum;
 
  constructor(private router     : Router,
              private authService: AuthService,
              private session    : SessionService) {
      this.authService.getLoggedUser.subscribe(user => this.getLoggedUser(user));
      this.authService.getUserNavigation.subscribe(nav => this.getNavigation(nav));
  }
 
  ngOnInit() {
    this.checkSession(); 
    if(Object.keys(this.loggedUser).length === 0){
      this.authService.getNavigation();
    }
    this.authService.getLoggedUser.subscribe(user => this.loggedUser = user);
    this.authService.getUserNavigation.subscribe(nav => this.navigations = nav);
  }
 
  Navigation() : Navigation[]{
    return this.navigations;
  }
 
  private getLoggedUser(user: UserAccount): void {
    if(user != null || user != ''){
      this.isLoggedIn = true;
      this.loggedUser = user;
      this.router.navigate(['/truck/list']);
    }
    else{
      this.router.navigate(['/Login']);
    }
  }
 
  private getNavigation(navigation: Navigation[]): void{
    if(navigation != null || navigation != ''){
      this.navigations = navigation;
    }
  }
 
  private checkSession(){
    this.isLoggedIn = <boolean>(<unknown>this.session.Get('isLoggedIn')) == true ? <boolean>(<unknown>this.session.Get('isLoggedIn')) : false;
    this.loggedUser = this.session.GetObject('loggedUser') != null ?  (<UserAccount>this.session.GetObject('loggedUser')) : <UserAccount><unknown>null;
  }
 
  public loggout(){
    this.authService.LogOut();
  }
}

Mes questions sont les suivantes :
1°- Est-ce la bonne manière de faire?
2°- Est-ce normal qu'à chaque fois que je change de page mon menu disparaît? Je dois sans doute à nouveau souscrire sur les différentes pages aux Event?

A noter que je stocke en session les infos de l'utilisateur et s'il est loggé.

Vos conseils sont les bien venus.
Merci

[paintbox]

Je pense que ma logique n'est pas bonne. Je vérifie mal si mon utilisateur est loggé.

[dukoid]

(1) utilise des modeles

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
export interface ICurrentUser {
  name: string;
  email?: string;
  password?: string;
  token?: string;
  isLogged: boolean;
  role: string;
 }

https://iner-dukoid.developpez.com/t...angular/#LXXIX


(2) dans un service on n'utilise pas : @Output
input() et @Output() sont réservés aux composants
utilise un behaviorSubject comme dans le tuto précédent !

(3)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<navigation [user]="user"></......>

navigation.html

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ng-container  *ngIf="user.isLogged && role.user == ".11......">
   <navigation1></navigation1>
</ng-container>
 
<ng-container  *ngIf="user.isLogged && role.user == "....22...">
   <navigation2></navigation2>
</ng-container>
 
<ng-container  *ngIf="user.isLogged && role.user == ".....33..">
   <navigation3></navigation3>
</ng-container>
 
 
name = 
<ng-container  *ngIf="user.isLogged >
   {{user.name}}
</ng-container>

(4)
dans le tuto tu peux trouver ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
   this.subLogin = this.authService.login(this.loginForm.value.email, this.loginForm.value.password).subscribe((user: ICurrentUser) => {
      // initialisation
      user.isLogged = true;
      user.email = this.loginForm.value.email;
      // enregistre et émet le nouvel utilisateur pour les composants qui ont souscrit
      this.authService.updateAndEmitCurrentUser(user);
      // clos le formulaire de connexion
      this.cancelEvent.emit(true);
      // à la connexion, on se rends à la page : /home
      this.router.navigateByUrl('/home');
    },
    error => {
      if (error.status == 401) {
        this.error = 'l\'email ou le mot de passe est incorrect';
      }  else {
        this.error = error.message + ' status : ' + error.status;
      }
    });
  }

[paintbox]

Hello dukoid, merci pour ton aide.
Je vais effectivement me baser sur ce tuto.
Merci

[paintbox]

J'essaie d'adapter mon code sur base de ton exemple mais j'ai un peu de mal.
Mon modèle UserAccount est le suivant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
import { Gender } from './Gender.interface';
import { Navigation } from './Navigation.interface';
import { Truck } from './Truck.interface';
import { UserAccountType } from './UserAccountType.interface';
 
export interface UserAccount{
    // User infos
    id?: number;
    firstName: string;
    lastName: string;
    mail: string;
    genderId: number;
    gender?: Gender;
    password: string;
    userName: string;
    login: string;
    useraccountTypeId: number;
    userAccountType?: UserAccountType;
    isLogged?: boolean;
    navigation?: Navigation[];
}

Il contient un array Navigation dans lequel seront placés les élément du menu. Le modèle Navigation est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
export interface Navigation{
    id: number;
    description: string;
    link: string;
    sequence: number;
    isDeleted: boolean;
}

J'ai adapté mon auth.service mais j'ai quelques soucis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
LogIn(login: string, password : string): Observable<UserAccount>{
  var result: boolean = false;
  let apiUserAccount: string = environment.apiAddress + 'UserAccount/' + 'Login?' + 'login=' + login + '&' + 'password=' + password;
     this.http.get<UserAccount>(apiUserAccount)
      .subscribe(response => {
        this.user = response as UserAccount;
        this.user.navigation = this.getNavigation();
        this.getNavigation();
        result = true;
      }),
      (error) =>{
        this.error = error;
        this.errorHandler.handleError(error);
        this.errorMessage = this.errorHandler.errorMessage;
      }
      return this.user as UserAccount;
}
 
getNavigation() : Navigation[] {
  var id;
  this.user = this.session.GetObject('loggedUser');
  this.isloggedIn = Object.keys(this.user).length > 0 ? true : false;
  id = Object.keys(this.user).length > 0 ? this.user.id : UserAccountTypeEnum.Customer;
  let apiNavigation: string = environment.apiAddress + `NavigationByUser/${id}`;
  this.repository.getData(apiNavigation)
    .subscribe(response => {
      this.navigations = (response as Navigation[]);
      this.navigations.sort((a, b) => a.sequence - b.sequence);
    });
 
    return this.navigations;
}

Pour la méthode LogIn j'ai le message d'erreur suivant : "UserAccount" n'a pas les propriétés suivantes de Observable<UserAccount> : _isScalar, source, operator...

Pourtant je retourne bien un UserAccount? Je ne comprend pas.

[krakatoa]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
      .subscribe((response:any) => {

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
      .subscribe((response:UserAccount) => {