Menu navigation adapté à l'utilisateur : bonnes pratiques?
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:
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:
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
