How to Show/Hide Elements Based on User Roles with Ionic [v4]

When you build an authentication system for your app it’s very likely that you also have some sort of role management. If you want to show or hide different elements in your Ionic app based on a role, this is for your.

In this Quick Win we will use a dummy auth service (so no real backend) but a real directive that will accept a role as input and automatically checks if the user has the role and display the component then.

We will have a user and admin, and we’ll also quickly add some animations but let me know below if you’d like to see more content on animations!

Setup Our Role Based App

We start with a blank Ionic 4 app (using the beta while writing this) and add the Angular animations package, a service and directive for our app and finally another module which will become the shared module of our directive:

ionic start roleAuth blank --type=angular

cd roleAuth

npm i @angular/animations

ionic g service services/auth

ionic g directive directives/hasRole

ionic g module directives/SharedDirectives --flat --spec=false

Once our app ist ready we need to import the Animations package and at the same time remove the import of our directive. It’s automatically added but we can’t use it like this with lazy loading so remove it for now and we’ll see how to add it later. Go ahead and change your app/app.module.ts to:

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';

import { AppRoutingModule } from './app-routing.module';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({

declarations: [AppComponent],

entryComponents: [],

imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule,

BrowserAnimationsModule],

providers: [

StatusBar,

SplashScreen,

{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }

bootstrap: [AppComponent]

})

export class AppModule {}

That’s it for the setup, now let’s build our dummy auth service.

Creating a Dummy Authentication Service

This service is now a lot simplified but you could still use it for your own case as you basically only have to make the HTPP calls to your API in the right places.

In our case we keep the currentUser as a BehaviourSubject in our service so others can easily subscribe to the authentication state, a system you might have used or seen with Firebase before as well.

Of course our login makes no sense but the important part is to have a user with roles that you can check later. In your case, your backend should return those roles so you can keep them in the app and use the hasRoles() later to make a quick check.

For now change your app/services/auth.service.ts to:

import { Injectable } from '@angular/core';

import { BehaviorSubject } from 'rxjs';

export interface User {

roles: string[];

}

@Injectable({

providedIn: 'root'

})

export class AuthService {

currentUser: BehaviorSubject<User> = new BehaviorSubject(null);

constructor() { }

if (name === 'user') {

this.currentUser.next({

roles: ['read-content', 'purchase-items', 'user']

});

} else if (name === 'admin') {

this.currentUser.next({

roles: ['read-content', 'write-content', 'admin']

});

}

getUserSubject() {

return this.currentUser.asObservable();

}

logout() {

this.currentUser.next(null);

}

hasRoles(roles: string[]): boolean {

for (const oneRole of roles) {

if (!this.currentUser.value || !this.currentUser.value.roles.includes(oneRole)) {

return false;

}

return true;

}

Now we can login users (not a real auth system!) and we get their roles so let’s focus on the directive to check the roles now.

The Role Based Angular Directive

The idea of our directive is that it can be easily added to any element inside your app to quickly check if the user is allowed to see it, but of course it could also be used for other cases.

If you want to protect whole pages, you should check out my Quick Win on using Route Guards with Ionic 4!

So our directive will later look like this in action:

1	<ion-card *appHasRole="['read-content']">

This means we can pass an array of strings to our directive and it then decides if the user is allowed to see the element.

Before we build the directive, we need to make it available to our pages and that’s where our shared module comes into play. This file will declare and export all directives (of course just the one in our case) so we can import it into the modules of our lazy loaded pages later. Now change the app/directives/shared-directives.module.ts to this:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { HasRoleDirective } from './has-role.directive';

@NgModule({

imports: [

CommonModule

declarations: [HasRoleDirective],

exports: [HasRoleDirective]

})

export class SharedDirectivesModule { }

Now we can build the real directive, and as said before it needs to handle an array of roles and check if the user has all those roles.

To achieve this we subscribe to the current user state through the Subject (more clearly, the Observable that we get from the Subject) and either call createEmbeddedView() to show it or clear() to remove it from the view.

There’s nothing else this directive needs to do so insert this into your app/directives/has-role.directive.ts:

import { Directive, Input, TemplateRef, ViewContainerRef, OnInit } from '@angular/core';

import { AuthService } from '../services/auth.service';

@Directive({

selector: '[appHasRole]'

})

export class HasRoleDirective implements OnInit {

@Input('appHasRole') roles: string[];

constructor(private authService: AuthService,

private templateRef: TemplateRef<any>,

private viewContainer: ViewContainerRef) { }

ngOnInit() {

this.authService.getUserSubject().subscribe(_ => {

if (this.authService.hasRoles(this.roles)) {

this.viewContainer.createEmbeddedView(this.templateRef);

} else {

this.viewContainer.clear();

}

});

}

Now we only need to apply it to our page!

Applying Our Role Based Directive

First of all we need to import the shared module so our page actually knows about the directive. You can do this with every lazy loaded page in your app, but right now we only got one so go ahead and import it to your app/home/home.module.ts like this:

import { NgModule } from '@angular/core';

import { CommonModule } from '@angular/common';

import { IonicModule } from '@ionic/angular';

import { FormsModule } from '@angular/forms';

import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';

import { SharedDirectivesModule } from '../directives/shared-directives.module';

@NgModule({

imports: [

CommonModule,

FormsModule,

IonicModule,

SharedDirectivesModule,

RouterModule.forChild([

{

path: '',

component: HomePage

}

])

declarations: [HomePage]

})

export class HomePageModule {}

Although the logic for our app is very dummy like and we don’t really need a lot, we need a few functions to trigger our authentication changes and login/logout the user.

As said before I also wanted to include some basic animations which you’ll find at the top inside the @Component annotation. Those animations will fade in/out the elements where we add our directive later, so go ahead and put all of this into your app/home/home.page.ts:

import { Component, OnInit } from '@angular/core';

import { AuthService } from '../services/auth.service';

import { trigger, transition, animate, style } from '@angular/animations';

@Component({

selector: 'app-home',

templateUrl: 'home.page.html',

styleUrls: ['home.page.scss'],

animations: [

trigger('fadeInOut', [

transition(':enter', [

style({opacity: 0}),

animate('200ms ease-in', style({ opacity: 1 }))

]),

transition(':leave', [

animate('200ms ease-in', style({ opacity: 0 }))

])

]

})

export class HomePage implements OnInit {

authenticated = false;

constructor(private authService: AuthService) { }

ngOnInit() {

this.authService.getUserSubject().subscribe(authState => {

this.authenticated = authState ? true : false;

});

}

loginAdmin() {

this.authService.login('admin');

}

loginUser() {

this.authService.login('user');

}

logout() {

this.authService.logout();

}

Finally we get to the usage of our directive, but you’ve already seen a spoiler of how to use it before so it’s not really new now 🙁

Anyway, you can apply your directive anywhere and simply add the roles the user needs to have in order to see the element. Besides that we add the animations in form of [@fadeInOut] which is enough to trigger the fade animations once the element is not shown or back on the screen again!

In our view we now apply the directive a few times to show elements to users, admins or both and to get the desired result change your app/home/home.page.html to:

<ion-header>

<ion-toolbar color="primary">

<ion-title>

Ionic Role Elements

</ion-title>

</ion-toolbar>

</ion-header>

<ion-content padding>

<ion-button expand="full" (click)="loginAdmin()" *ngIf="!authenticated">Login as Admin</ion-button>

<ion-button expand="full" (click)="loginUser()" *ngIf="!authenticated">Login as User</ion-button>

<ion-button expand="full" (click)="logout()" *ngIf="authenticated">Logout</ion-button>

<ion-card *appHasRole="['read-content']" [@fadeInOut] color="primary">

<ion-card-header>My Read Content</ion-card-header>

<ion-card-content>

Things every logged in user can see

</ion-card-content>

</ion-card>

<ion-card *appHasRole="['purchase-items']" [@fadeInOut] color="secondary">

<ion-card-header>My User Purchase Content</ion-card-header>

<ion-card-content>

Things only the users can see

</ion-card-content>

</ion-card>

<ion-card *appHasRole="['write-content', 'admin']" [@fadeInOut] color="tertiary">

<ion-card-header>My Admin Content</ion-card-header>

<ion-card-content>

Things only the admin can see

</ion-card-content>

</ion-card>

</ion-content>

And that’s how you create a simply role based directive to show and hide elements anywhere inside your Ionic 4 app!

The original idea came from an Ionic Academy user who wanted to display items inside his app based on a purchase of a user, so that’s another case this directive could be use for with some minor changes.

You can also find a video version of this Quick Win below.