"Refresh" side menu


#1

Hi guys, I have an issue to “refresh” my side menu, depending on the user connected.
I have two way to login, through a login and through a qrcode. If I logged in through login I am ADMIN, otherwise through wrcode I am a NORMAL USER.

My app.html

<ion-menu [content]="content">
  
  <ion-header>
    <ion-toolbar>
      <ion-title>Menu</ion-title>
    </ion-toolbar>
  </ion-header>

  <ion-content>

    <ion-list no-lines *ngIf="admin">

      .....

    </ion-list>

    <ion-list no-lines *ngIf="!admin">
      ....

    </ion-list>

    ...
  </ion-content>

</ion-menu>


<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

app.ts

imports ...


@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  @ViewChild(Nav) nav: Nav;

  account : Account;
  rootPage: any;
  admin: boolean = false;

 

  constructor(
      ...
      private loginService: LoginService) {
   
     ...
        
        // if I am admin      
        if (authStorage.connected) {
             this.rootPage = AlbumsPage;
          this.admin = true;
        } 
        // if I am a normal user
        else  if (accountStorage.connected) {
         
          this.rootPage = PhotosPage;
          this.admin = false;
         
        }  
       
        else {
          this.admin = this.loginService.admin;
          this.rootPage = TutorialPage;
        }

       
      this.initializeApp();

      }
    );
        
   ...

  }

  initializeApp() {

    console.log("Initialize app");
    this.platform.ready().then(() => {
      
     ....

    });

   
    
  }

  
}


and the login.ts:

imports ...

@IonicPage()
@Component({
  selector: 'page-login',
  templateUrl: 'login.html'
})
export class LoginPage {
 



  constructor(
...
    private loginService: LoginService
  ) {
  
    })
  }

  doLogin() {

    this.loginService.fetchList().subscribe(

      (list: UserModel[]) => {
        
        this.people = list || [];
        
      if (the login is ok)
      {

          this.authStorage.setAuth(
            {
              email: this.account.email,
              password: this.account.password,
              uuid: this.device.uuid
            }
          );
          this.loginService.admin = true;          
          this.navCtrl.setRoot(AlbumsPage);

        } else {
          "alert error"
        }
      }      
    );
  }

}

LoginService.ts:

imports

@Injectable()
export class LoginService {
  
  public admin: boolean = false;

  constructor(private api: Api) {  }

  

}

In the app.module.ts in the providers array I put LoginService

So, if I had in sql lite db, either account or auth, I am able to set the right menu. If I don’t have account or auth in the db, the app show the login or qrcode. After login, I set this.loginService.admin = true; but nothing change.

Help me please


#2

As your constructor for MyApp is just called once your menu will not get the information that status has changed.

I use a BehaviourSubject for that. In Menu I subscribe to that subject to be notified about changes. You can find BehaviourSubject in rxjs library


#3

Thank you. I didn’t know about BehaviourSubject.
Now I solved my problem.
If someone is interested on it, I would advice this : http://embed.plnkr.co/sS7htB/

Bye bye