如何基於角度的用戶角色/權限管理菜單

Question

我已經開始了一個新的角度項目，在我的應用程序中有3種類型的用戶（管理員，客戶和公司）。 如何限制客戶訪問管理員用戶菜單？

Answer 1

您應該實現ActivatedRoute接口以限制導航到特定的URL /資源， 閱讀更多

Answer 2

我喜歡將菜單上的聲音保存在數據庫中。 這為我提供了更安全的服務器控件，處理允許/拒絕操作的用戶級別的權限。 如果您只對客戶端感興趣，可以在路由模塊上添加一個變量：

{ path: 'profile/:user_level', component: ProfileComponent }

然后，您可以實現組件內部的差異。 如何確保用戶只能看到他的關卡內容？ 只需實現一個控件，檢查會話用戶是否正在嘗試查看不適合他的內容。 （ProfileComponent中的示例）

this.user_level= + params['user_level'];
this.utilityService.checkUserLevel(this.user_level);

UtilityService：

 checkUserLevel(url_liv_serial: number) {
    let utente: Utente = JSON.parse(localStorage.getItem('currentUser'));


    if (url_liv_serial < utente.ute_liv_serial) {
        this.router.navigate(['/login']);
        let snackBarRef = this.snackBar.open('Access denied', 'Close', {
            duration: Constants.short_time_sb
        });
    }
}

Answer 3

您可以使用ngx-permissions庫。 它支持延遲加載，孤立的延遲加載，然后是語法。 加載庫

@NgModule({

 imports: [

 NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})

加載角色

this.ngxRolesService.addRole('GUEST', () => {
  return true;
}); 

安全的根

const appRoutes: Routes = [
{ path: 'home',
    component: HomeComponent,
    canActivate: [NgxPermissionsGuard],
    data: {
      permissions: {
        only: 'GUEST'
      }
    }
  },
];

您可以在WIKI頁面上找到詳細的文檔

Answer 4

您應該做兩件事：1。保護您的路線以便通過這些菜單項訪問2.不要為不應該訪問這些菜單項的用戶呈現這些菜單項。

權限可以由數據庫驅動。 您可以使用角度2中的防護保護路線，並且可以使用ng-if指令限制菜單項的渲染。

https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html

https://angular.io/docs/ts/latest/guide/router.html