Estrutura de dados para comparar permissão de acesso entre objetos (Angular)

Front-end
, ,
#1

Consigo autenticar mas, a permissão na funciona corretamente com a roleMatch

//Saída no console

userRoles:  [{…}]
0: {roleNome: 'Usuario', roleDescricao: 'Função padrão para registro recém-criado'}

allowedRoles:  ['Admin']
0: "Admin"
		
userRoles:  [{…}]
0: {roleNome: 'Usuario', roleDescricao: 'Função padrão para registro recém-criado'}

allowedRoles: ['Usuario']
0: "Usuario"

//Html

html
html735×241 10.7 KB 

<li class="nav-item">
          <a class="nav-link active" aria-current="page" routerLink="/admin"
          *ngIf="userService.roleMatch(['Admin'])"
          >Painel Admin</a>
        </li>
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" routerLink="/usuario"
          *ngIf="userService.roleMatch(['Usuario'])"
          >Painel Usuario</a>
        </li>

//Uso indexOf() retorna o primeiro índice em que o elemento pode ser encontrado no array, retorna -1 caso o mesmo não esteja presente.

public roleMatch(allowedRoles: any): boolean {

    let isMatch = false;
    const userRoles: any = this.userAuthService.getRoles();

    if(userRoles != null && userRoles) {
      for(let i=0; i < userRoles.length; i++) {
        console.log('userRoles: ',userRoles);
        for(let j=0; j < allowedRoles.length; j++) {
		
          //if(userRoles[i].roleName === allowedRoles[j]){}// não funciona
          console.log('allowedRoles: ',allowedRoles);
          
          if(allowedRoles.indexOf(userRoles[i].roleName)){
            console.log('roleMatch achou: ',allowedRoles.indexOf(userRoles[i].roleName));
            isMatch = true;
            return isMatch;
          }
          else {
            console.log('roleMatch não achou: ',allowedRoles.indexOf(userRoles[i].roleName));
            return isMatch;
          }

        }
      }
    }
    return isMatch;
  }