In this post, we show you how to create a side menu which displays different items based on role User. we will create simple authentication mechanisms and how to display two different menus and two different user roles.

Step-1.

ionic start project-name blank --type=angular

Step-2.

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.

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

providers/auth/auth.ts

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 { 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

login/login.ts

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.

login/login.html

login Username Password Login

Step-7.

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.



Menu {{p.title}} {{username}} Logout









Step-8. After Complete Menu part go to admin/admin.html file then wite a code.



Admin





Step-9. Open adminSecond/adminSecond.html file then write code.



AdminSecond

Step-10. Open User/User.html file then write code.



User



Step-11 . Open UserSecond/UserSecond.html file then write code.



UserSecond After Complete Menu part go to admin/admin.html file then wite a code.Open adminSecond/adminSecond.html file then write code.Open User/User.html file then write code.. Open UserSecond/UserSecond.html file then write code.

Firstly We install the ionic project with the help of ionic installation command.After creating an ionic project then open command window then create some pages with the help of command.After Create Pages go to app.module.ts File then add some library and Import.. In this step go tofolder then open auth.ts file then copy-paste this code.. In this step go tofolder thenopen login.ts file then write this code.In this step go to pages folder thenopenfile then write copy-paste code.After Finished login part move to menu, part goes to menu folder then menu.ts file open file and copy-paste code.After complete menu.ts file move to menu.html file open file then write code.