Change side menu items depending on logged in user

Ionic Framework ionic-v3
1

Hello, I have an app with a side menu and a user login. Each user has a role and each role has it’s own associated menus. The menus are loaded trough a REST API.

So far I’ve made it work somewhat by having checks in the app.component constructor and depending on the role it loads different menus, but this has the drawback of not updating after a user logs out and a user with a different role logs in - it keeps the loaded menus from the previous user.

this.storage.get('loggedIn')
.then((loggedIn) => {
  this.loggedIn = loggedIn;

  if (this.loggedIn) {

    this.rootPage = 'HomePage';
    this.storage.get('user')
      .then((storage) => {
        this.userService.getUser(storage.id)
          .subscribe(user => {
            this.loadMenus(user.role.toString(), ['role']);
          })
      });
  } else {
    this.rootPage = 'LoginPage';
  }
  this.initializeApp();
});

This is the code in my app.component constructor. loadMenus sets menus variable with the returned menus depending on role. I was thinking that I need to just set menus = [], but I don’t know where to do it.

2

Hi

Check the ionic conference starter app.

Ionic start

Then select the conference app.

Does all what you are looking for

Tom

3

I suggest you to create a provider for the REST communication. Then save the logged in user inside this provider and access it from the app.component. This way you are getting always the last state and so you can update your UI…

4

I checked the app but my list is dynamically loaded when I get the logged in user role, while the conference app has two set lists which are switched depending on logged in status.

5

Well
Then you know WHERE to put the logic.

Just do a http.get to pull the content for the menu list

Tom