Change links of the sidemenu depending of a localstorage variable

Ionic Framework ionic-v3
1

I’m doing an application and i have different roles for each rules.

How can i restrict the sidemenu navigation for a few links and make it invisible depending of his roles? I try to achieve this from the begining (in app.module) but i don’t know how do this if the user it isn’t already logged

Thanks in advance

2

Hello,
*.module.ts aren’t places for logic code.

Maybe you mean app.component.ts. In app.component.ts should be an array which holds the entrys for the sidemenu. Change this array depending to your needs.

Best regards, anna-liebt

3

Hi
I have the same problem days ago, i find the solution doing this:

in your app.component.ts:
this help you when the user is already login

initializeApp() {
    this.platform.ready().then(() => {
      // Here we will check if the user is already logged in
      // because we don't want to ask users to log in each time they open the app
      let env = this;
      this.nativeStorage.getItem('user')
      .then( function (data) {
        // user is previously logged and we have his data
        // we will let him access the app
        //env.nav.push(LandPage);
        env.emailUser = data.email;
        env.tipo = data.tipo;
        if(data.tipo = "1"){
          env.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Alta de Clientes', component: AltaclientesPage},
            { title: 'Noticias Pagina Principal', component: NoticiasprincipalPage},
            { title: 'Mensajeria', component: MensajeriaPage},
            { title: 'Guardaropa', component: GuardaropaPage},
            { title: 'Chat', component: ChatPage},
            { title: 'Manual de Cliente', component: ManualclientePage},
            { title: 'Logout', component: LoginPage}
          ];
        }else{
          env.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Guardaropa', component: GuardaropaPage},
            { title: 'Chat', component: ChatPage},
            { title: 'Manual de Cliente', component: ManualclientePage},
            { title: 'Logout', component: LoginPage}
          ];
        }
        env.splashScreen.hide();
      }, function (error) {
        //we don't have the user data so we will ask him to log in
        env.nav.push(LoginPage);
        env.emailUser = "email"
        env.splashScreen.hide();
      });
      this.statusBar.styleDefault();
      this.splashScreen.hide();
    });
  }

when the user is new, and the first time logged:
in app.component.ts:

menuOpened(){
    console.log("menu abierto");
    this.platform.ready().then(() => {
      let env = this;
      this.nativeStorage.getItem('user')
      .then( function (data) {
        env.emailUser = data.email;
        env.tipo = data.tipo;
        if(data.tipo = "1"){
          env.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Alta de Clientes', component: AltaclientesPage},
            { title: 'Noticias Pagina Principal', component: NoticiasprincipalPage},
            { title: 'Mensajeria', component: MensajeriaPage},
            { title: 'Guardaropa', component: GuardaropaPage},
            { title: 'Chat', component: ChatPage},
            { title: 'Manual de Cliente', component: ManualclientePage},
            { title: 'Logout', component: LoginPage}
          ];
        }else{
          env.pages = [
            { title: 'Home', component: HomePage },
            { title: 'Guardaropa', component: GuardaropaPage},
            { title: 'Chat', component: ChatPage},
            { title: 'Manual de Cliente', component: ManualclientePage},
            { title: 'Logout', component: LoginPage}
          ];
        }
      }, function (error) {
        env.emailUser = "email";
        env.tipo = "1";
      });
    });
  }

in your app.html need add this in you menu:

<ion-menu [content]="content" (ionOpen)="menuOpened()" id="myMenu">

i hope this can help you.