In this post, we show you how to create an Angular Ionic side menu that displays different items based on role Users. we will create simple authentication mechanisms and how to display two different menus and two different user roles.

Step-1. Firstly We install the ionic project with the help of the ionic installation command. ionic start project-name blank --type=angular

Step-2.After creating an ionic project then open the command window then create some pages with the help of the command.
ionic g page login ionic g page menu ionic g page admin ionic g page adminSecond ionic g page user ionic g page userSecond ionic g provider auth ionic lab
Step-3. After Create Pages go to app.module.ts File then add some library and Import.


import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { AuthProvider } from '../providers/auth/auth'; @NgModule({ declarations: [ MyApp, ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, AuthProvider ] }) export class AppModule {}
Step-4. In this step go to providers/auth/auth.ts folder then open auth.ts file then copy-paste this code.
import { Injectable } from '@angular/core'; export interface User{ name: string; role: number; } @Injectable() export class AuthProvider { currentUser: User; constructor() {} login(name: string, pw: string) : Promise<boolean>{ return new Promise((resolve, reject) =>{ if (name === 'admin' && pw === 'admin'){ this.currentUser = { name: name, role: 0 }; resolve(true); }else if (name === 'user' && pw === 'user'){ this.currentUser = { name: name, role: 1 }; resolve(true); }else{ reject(false); } }); } isLoggedIn(){ return this.currentUser !=null } logout(){ this.currentUser = null; } isAdmin(){ return this.currentUser.role === 0; } }
Step-5. In this step go to the pages folder then login/login.ts open login.ts file write this code.
import { Component } from '@angular/core'; import { IonicPage, NavController, AlertController } from 'ionic-angular'; import * as auth from '../../providers/auth/auth'; @IonicPage() @Component({ selector: 'page-login', templateUrl: 'login.html', }) export class LoginPage { user = { name: 'name', pw: 'admin' }; constructor(public navCtrl: NavController, private authProvider: auth.AuthProvider, private alertCtrl: AlertController) { } loginUser() { this.authProvider.login(this.user.name, this.user.pw).then(success =>{ if (success){ this.navCtrl.setRoot('MenuPage'); }else{} }).catch(err => { let alert = this.alertCtrl.create({ title: 'login failed', message: 'please check your credentials', buttons: ['ok'] }); alert.present(); }); } }
Step-6. In this step go to pages folder then login/login.html open login.html file write copy-paste code.
<ion-header> <ion-navbar> <ion-title>login</ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item> <ion-label fixed>Username</ion-label> <ion-input type="text" [(ngModel)]= "user.name"></ion-input> </ion-item> <ion-item> <ion-label fixed>Password</ion-label> <ion-input type="Password" [(ngModel)]= "user.pw"></ion-input> </ion-item> </ion-list> <button ion-button full (click)= "loginUser()">Login</button> </ion-content>

 
Step-7. After the Finished login part move to the menu, the part goes to the menu folder then the menu.ts file opens the file and copy-paste code.

import { Component, ViewChild } from '@angular/core'; import { IonicPage, NavController, Nav, App } from 'ionic-angular'; import { AuthProvider } from '../../providers/auth/auth'; /** * Generated class for the MenuPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-menu', templateUrl: 'menu.html', }) export class MenuPage { username = ''; pages = []; @ViewChild(Nav) nav: Nav; constructor(public navCtrl: NavController, private authProvider: AuthProvider, private appCtrl: App) { } ionViewWillEnter() { if(this.authProvider.isAdmin()){ this.pages = [ {title: ' Attendee List ', page: 'AdminPage',url: '/Attendee', icon: 'home'}, {title: ' Attendee Form ', page: 'AdminSecondPage',url: '/Attendee Form', icon: 'cube'}, {title: ' Booths ', page: 'AdminThirdPage',url: 'Booths', icon: 'help'}, {title: ' Questions so far ', page: 'AdminFourthPage',url: 'Question so far', icon: 'paper'}, {title: ' POC Requests ', page: 'AdminfivePage', url: 'POC Requests', icon: 'chatbubbles'}, {title: ' Feedback ', page: 'AdminSixPage', url: 'Feedback', icon: 'cube'} ]; this.openPage('AdminPage'); }else{ this.pages = [ {title: 'Agenda', page: 'UserPage',url: '/list', icon: 'home'}, {title: ' Booths', page: 'UserSecondPage',url: '/booth', icon: 'cube'}, {title: ' Ask a question', page: 'UserThirdPage',url: '/ask', icon: 'help'}, {title: ' POC Request', page: 'UserFourthPage',url: '/poc', icon: 'paper'}, {title: ' Feedback', page: 'UserfivePage',url: '/feedback', icon: 'chatbubbles'}, ]; this.openPage('UserPage'); } this.username = this.authProvider.currentUser.name; } openPage(Page){ this.nav.setRoot(Page); } logout(){ this.authProvider.logout(); //this.nav.setRoot('LoginPage'); this.appCtrl.getRootNav().setRoot('LoginPage'); } ionViewCanEnter(){ return this.authProvider.isLoggedIn(); } }
Step-7. After complete, the menu.ts file move to the menu.html file open file then writes code.