1

I'm working on a Angular5 free template that I found on github. It contains only one navbar but for my case I have 2 type of users (Admin and Manager) which do not have the same navbar at all. How can I resolve this? How can I redirect each one of them to a different navbar?

This is how the template looks like:

In this picture you can see the file app-sidebar-nav.component.html that uses the file _nav.ts which contains the navbar.

enter image description here

This is the file _nav.ts

enter image description here

I want to add another file called for exemple _nav2.ts that the manager will see after authentication, which is different. And the _nav.ts will be the result that the Admin will see after authentication.

In directory views/pages I have a file called login.component.ts and login.component.html

EDIT :

This is the file authentication.service.ts

@Injectable()
export class AuthenticationService{

  private host:string="http://localhost:8080";
  private jwtToken=null ;
  private roles:Array<any>;
  private user:string;
  constructor(private http:HttpClient){

  }
  login(user){

    return this.http.post(this.host+"/login",user,{observe: 'response'});

  }

  getToken(){
    return this.jwtToken;
  }

  isAdmin(){
    for(let r of this.roles){
      if(r.authority=='ADMIN') return true;}
    return false;
  }

isManager(){
    for(let r of this.roles){
      if(r.authority=='MANAGER') return true;}
    return false;
  }
}
dEs12ZER
  • 788
  • 4
  • 24
  • 51

1 Answers1

0

You'll have to add an input property userType that can be admin or manager on the AppSidebarNav class, change your imports a bit, like:

import {navigation as adminNav} from './../../_nav';
import {navigation as managerNav} from './../../_nav2';

And add a method in the class which returns the right info depending on the input:

class AppSidebarNav {
    @Input() userType = 'admin';

    get navItems(): any[] {
        return this.userType === 'admin' ? adminNav : managerNav;
    }
}

Also update your nav template to use navItems instead of navigation (so it jumps into the new method).

Then you need to update the template where this app-sidebar-nav is included to add new userType property, like this: <app-sidebar-nav [userType]="isAdmin ? 'admin' : 'manager'"></app-sidebar-nav>

Klaas Cuvelier
  • 291
  • 1
  • 8
  • thank you so much for help , this worked well for me , but the problem is that i can get the type of user only after authentication of the user , i have a service : authentication.service.ts , after the authentication i have a method that returns the type of the user ( i use system of role/user with spring security and jwt in backend side ) , how can i do that in this case? – dEs12ZER May 02 '18 at 10:52
  • I guess the code for your Authentication service is not complete, right? Question is, how would you like to handle the view while you don't have the user info yet, hide the top bar? Show the manager one? ... On a side note, for values that you need to fetch asynchronously, it might be interesting to use observables more. (there's probably some videos out there that help you get started with this) – Klaas Cuvelier May 02 '18 at 20:04
  • yes it's a little bit long , so i copied only the most important thing , and yes this is the issue , i can't handle the view while i don't have the user info yet , any method that can help me doing that i'll use it , do you have any idea ? helpful links ? – dEs12ZER May 02 '18 at 21:29
  • You could hide the bar (if that's an option), you could add a new type "unauthorized" which has its own list of items (maybe/probably empty), ... I guess that mostly up to you – Klaas Cuvelier May 02 '18 at 22:20
  • ah i see , okey i will search some exemple about this method , thank you for your help , i appreciate it :) – dEs12ZER May 02 '18 at 22:32
  • as solution i want to hide the and show it after authentication , in this case i can use my authenticationService right? – dEs12ZER May 02 '18 at 22:54
  • You'll need the authentication status (logged in or not logged in) in your application component, through the AuthenticationService indeed, then just add `` – Klaas Cuvelier May 02 '18 at 22:58
  • can you please see this post https://stackoverflow.com/questions/50174341/hide-navbar-before-login-page-in-angular5 , i still have a problem if you have any idea :) thank you in advance. – dEs12ZER May 04 '18 at 13:11