ユーザーのセキュリティ権限に基づいてボタンを表示するための角度2のベストプラクティス

Question

現在、最初のAngular 2サイトを開発中です。このサイトには、左側にBootstrap NavBarが含まれているため、ユーザーはサイト上の別のページに移動できます。各ユーザーは、セキュリティ権限に応じてNavBar内のさまざまなナビゲーションボタンを表示できます。

私はちょうどボタンがDBから配列に取り出されたかのように振る舞いました。次に、各ボタンがNavBarに表示されます。以下のコードをご覧ください。

質問

1. それは動作しますが、これはそれを行うための最良の方法ですか？

2. ユーザーのセキュリティアクセス許可に基づいてDBから設定を取得し、それらの設定を表示する方が良いベストプラクティス方法はありますか？

3. さらに、私がそれをもっとよくするために考慮する必要があるものはありますか セキュリティ？

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" } 
    ]; 
} 

Answer 1

ではなく、データベースからボタンをもたらします。役割に従ってユーザーを分類します。これらの役割をDBに追加し、役割に応じてボタンを表示します。

ロールの助けを借りて、他の種類のセキュリティ/アクセスレベルを追加することができます。

データベースからボタンをフェッチするよりもはるかに良いでしょう。