Aurelia - simple role-based navigation using 'aurelia-authentication'

app.router.config.js (Aurelia - simple role-based navigation using 'aurelia-authentication')

import {AuthenticateStep} from 'aurelia-authentication';
import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';
import {Session} from 'services/session';
import * as log from 'toastr';

@inject(Router)
export default class {

    constructor(router) {
        this.router = router;         
    }

configure() {

    var appRouterConfig = function(config) {
        config.title = '';

        config.addPipelineStep('authorize', AuthenticateStep); // authentication
        config.addPipelineStep('authorize', AuthorizeStep); // authorization

        let customerRetail = "customerRetail";     
        let vendor = "Vendor";
        let deliveryCompany = "DeliveryCompany";
        let administrator = "Administrator";

        let allRoles = [customerRetail, vendor, deliveryCompany, administrator];

        // Here, we describe the routes we want along with information about them
        // such as which they are accessible at, which module they use, and whether
        // they should be placed in the navigation bar
        
        // * if no roles are defined, all roles are allowed.
        config.map([
            {
                route: 'dashboard', moduleId: 'dashboard/dashboard', nav: false, title: '*Dashboard', auth: true
            },
            {
                route: 'shop', moduleId: 'order/customer-order', nav: 2, title: 'Shop Now', auth: true, roles:  [customerRetail, administrator]
            }, 
             {
                 route: 'order-history', name: 'order-history', moduleId: 'order/order-history', nav: 2, title: 'My Orders', auth: true, roles:  [customerRetail, administrator]
             }, 
            {
                route: 'vendor', moduleId: 'order/vendor-order', nav: 2, title: 'Vendor Area', auth: true, roles:  [vendor, administrator]
            }, 
              {
                  route: 'delivery', moduleId: 'order/delivery-company-order', nav: 2, title: 'Delivery Area', auth: true, roles:  [deliveryCompany, administrator]
              }, 
            {
                route: 'contact', moduleId: 'contact/contact', nav: false, title: 'Contact', auth: true
            },
            {
                route: ['configuration'],
                moduleId: 'configuration/configuration',
                nav: 5,
                title: 'Settings',
                auth: true,
                roles:  [administrator]
            },
            {
                route: ['', 'home'], moduleId: 'home/home', nav: true, title: 'Home', auth: false
            },
            {
                route: 'signup', moduleId: './signup', nav: true, title: 'Sign up', auth: false
            },
            {
                route: 'login', moduleId: './login', nav: true, title: 'Login', auth: false
            },
            {
                route: 'logout', moduleId: './logout', nav: true, title: 'Logout', auth: true
            },
            {
                route: 'confirmationSent', moduleId: './confirmationSent', nav: false, title: 'Confirmation'
            },
            {
                route: 'resetPassword', moduleId: './resetPassword', nav: false, title: 'ResetPassword'
            },
            {
                route: 'forgotPassword', moduleId: './forgotPassword', nav: false, title: 'ForgotPassword'
            }
        ]);
    };

 
    this.router.configure(appRouterConfig); 
}
}

@inject(Session)
class AuthorizeStep {
    constructor(session) {      
        this.currentUser = session.getCurrentUser();
    }
    run(routingContext, next) {  

        // if we need to authenticate / authorize, verify the logged in users roles here.
        if(routingContext.config.auth && routingContext.config.roles){
            for (var i = 0; i < routingContext.config.roles.length; i++) {                   
                
                // in this case the user is only in one role at a time.
                if(this.currentUser.role.toLowerCase() === routingContext.config.roles[i].toLowerCase())
                {                       
                    return next(); 
                }                      
            }
               
            log.warning('not authorized');
            return next.cancel();                
        }  

        routingContext.getAllInstructions();
        return next();
    }
}

nav-bar.html

              <div class="rd-navbar-nav-wrap">
                    <!--RD Navbar Nav-->
                    <ul class="rd-navbar-nav">
                        <li show.bind="showNav(navItem)" repeat.for="navItem of router.navigation | authFilter: isAuthenticated"  class="${navItem.isActive ? 'active' : ''}">
                            <a href.bind="navItem.href">${navItem.title}</a>                           
                        </li>
                    </ul>
                    <ul class="rd-navbar-nav">
                        <li if.bind="auth.authenticated">
                            Welcome, ${currentUser.displayName}
                        </li>
                    </ul>
                    <!--END RD Navbar Nav-->
                </div>
                
             

nav-bar.js

import {inject} from 'aurelia-framework';
import {AuthService} from 'aurelia-authentication';
import {Session} from 'services/session';
import * as log from 'toastr';
import {Router} from 'aurelia-router';

@inject(AuthService, Session, Router)
export class NavBar {

    constructor(auth, session, router){
        this.auth = auth;      
        this.session = session; 
        this.router = router;
    }    

    showNav(navItem){ 

        if(!navItem.config.roles){ 
            return true; 
        }

        this.currentUser = this.session.getCurrentUser();   

        return navItem.config.roles.some(i=> i.toLowerCase() === this.currentUser.role.toLowerCase()); 
    }

    attached() {
        this.currentUser = this.session.getCurrentUser();   
    }    
    get isAuthenticated(){       
        return this.auth.isAuthenticated();
    }
}

session.js

import * as log from 'toastr';

export class Session { 

    constructor(user){
        this.currentUser = user;
    }     
    /*
     this will grab the token from local storage and return the currently authenticated user
    */
    getCurrentUser(){        

        try {

            var token = localStorage.getItem('aurelia_authentication');
            var parsedToken = JSON.parse(token);
           
            if (token) {
                let base64Url = token.split('.')[1];

                this.currentUser = JSON.parse(window.atob(base64Url));
                
                 // decode the base64 string into a JSON object.
                Object.assign(this.currentUser, parsedToken);
            }

        } catch (error) {          
            log.error('Unauthorized (no token)' + error);
        }  
        return this.currentUser;
    }
}