CODEWITHSUNDEEP
securityangulartypescript
m_collard
m_collard

Reputation: 2018

Best Practise in Angular2 for displaying buttons based on a users security permissions

I’m currently developing my first Angular 2 site. The site contains a Bootstrap NavBar on the left hand side so the user can navigate to different pages on the site. Each user can see different navigation buttons in the NavBar depending on their security permissions.

At the moment I’ve just mocked it to act as if the buttons have been retrieved from the DB into an array. Then each button is displayed in the NavBar by looping round the array. Please see the code below.

Questions

  1. It works, but is this the best way to do it?

  2. Is there a better best practice way to retrieve settings from a DB based on a users security permissions and display those settings?

  3. And is there anything else I need to consider to make it more security?

navbar.component.heml

<div class="nav-side-menu">
    <div class="brand">NavBar</div>

    <div class="menu-list">
        <ul id="menu-content" class="menu-content collapse out">
            <li *ngFor="let appButton of appButtons">
              <a href="#">
                <i class="{{appButton.buttonClass}}"></i> {{appButton.displayName}}
              </a>
            </li>
        </ul>
     </div>
</div>

navbar.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  // Hard coded in at the moment, but these settings 
  // will be retrieved from the DB
  appButtons = [
    { displayName: "Dashboard", buttonClass: "fa fa-dashboard fa-lg" },
    { displayName: "Gift", buttonClass: "fa fa-gift fa-lg" },
    { displayName: "Globe", buttonClass: "fa fa-globe fa-lg" },
    { displayName: "Search", buttonClass: "fa fa-search fa-lg" }
  ];
}

Upvotes: 0

Views: 183

Answers (1)

Gourav Bhatia
Gourav Bhatia

Reputation: 196

Rather than bringing buttons from the database. Categorized your user according to the roles. Add these roles in your DB and show the buttons according to the roles.

You can add other types of security/access level with the help of role.

Which will be much better than fetching the buttons from the database.

Upvotes: 2

Related Questions