Aurelia - Hiding routes in navmenu ends up displaying nothing

Question

I wanted to hide routes that were the user roles and I found THIS question on SO that is similar. I tried to implement it in my typescript project but its returning nothing and I am not sure why.

This is my implementation as it stands.

import { autoinject, bindable, bindingMode } from "aurelia-framework";
import { Router } from 'aurelia-router'

@autoinject
export class Navmenu {
 public userName: string = 'anonymous';
 private userRole = localStorage.getItem("user_role");


 constructor(public authService: AuthService, public router: Router) {
     this.userName = authService.getUserName();
     console.log("userRole: ", this.userRole);
 }

 get routes() {
     return this.router.navigation.filter(r => r.settings.roles === this.userRole );
 }
}

My console.log shows "Admin" in the console but my filter doesnt filter it.

Here is how I have structured a route:

        {
            route: ["", "scheduler"],
            name: "scheduler",
            settings: {
                icon: "scheduler",
                auth: true,
                roles: ["Employee", "Admin"],   //These are my roles for this route.
                pos: "left"
            },
            moduleId: PLATFORM.moduleName("../components/scheduler/scheduler"),
            nav: true,
            title: "scheduler"
        },

Roles is an array.

How do I structure my filter so that it matches any userRole and thus returns a subset of filtered routes?

Answer 1

Look at this line in your router config:

roles: ["Employee", "Admin"]

Then at this in your getter:

r.settings.roles === this.userRole

roles is an array whereas this.userRole is a string, so the === operator will always return with false. Use indexOf or some instead:

return this.router.navigation.filter(r => r.settings.roles.indexOf(this.userRole) > -1);

or

return this.router.navigation.filter(r => r.settings.roles.some(t => t === this.userRole));