I’m in the process of building my inaugural Angular 2 website. Featuring a Bootstrap NavBar positioned on the left side, users can effortlessly navigate to various pages within the site. The navigation buttons displayed on the NavBar are tailored based on each user's security permissions.
Currently, I have simulated retrieving these buttons from a database and storing them in an array. Subsequently, I loop through the array to display each button on the NavBar. Refer to the code snippet below for more details.
Inquiry
The current method works, but is it the most efficient approach?
Is there a recommended best practice for fetching settings from a database according to user security permissions and showcasing those settings?
Are there any additional security considerations that need to be taken into account?
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() {
}
// Though currently hardcoded, these settings
// will eventually be fetched from the database
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" }
];
}