繁体   English   中英

如何基于角度的用户角色/权限管理菜单

[英]How to manage menu based on user roles/permissions in angular

我已经开始了一个新的角度项目,在我的应用程序中有3种类型的用户(管理员,客户和公司)。 如何限制客户访问管理员用户菜单?

您应该实现ActivatedRoute接口以限制导航到特定的URL /资源, 阅读更多

我喜欢将菜单上的声音保存在数据库中。 这为我提供了更安全的服务器控件,处理允许/拒绝操作的用户级别的权限。 如果您只对客户端感兴趣,可以在路由模块上添加一个变量:

{ 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
        });
    }
}

您可以使用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页面上找到详细的文档

您应该做两件事: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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM