typescript 如何基于角度的用户角色/权限管理菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42997053/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to manage menu based on user roles/permissions in angular
提问by byteC0de
I have started a new angular project, In my application have 3 types of users (admin, customer, and company). How can restrict customers from access admin users menus?
我开始了一个新的 angular 项目，在我的应用程序中有 3 种类型的用户（管理员、客户和公司）。如何限制客户访问管理员用户菜单？
回答by Justus Ikara
回答by alexKhymenko
You can use ngx-permissionslibrary. It support lazy loading, isolated lazy loading, then else syntax. Load library
您可以使用ngx-permissions库。它支持延迟加载、隔离延迟加载和 else 语法。加载库
@NgModule({
imports: [
NgxPermissionsModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
Load roles
加载角色
this.ngxRolesService.addRole('GUEST', () => {
return true;
});
Secure root
安全根
const appRoutes: Routes = [
{ path: 'home',
component: HomeComponent,
canActivate: [NgxPermissionsGuard],
data: {
permissions: {
only: 'GUEST'
}
}
},
];
Detailed documentation you can find on WIKIpage
您可以在WIKI页面上找到详细的文档
回答by Michele Sapignoli
I like to keep my menu voices on a database. This gives me safer server controls, handling permissions for user levels allowing/denying actions. If you are only interested in the client side, you can simply add a variable on your routing module:
我喜欢将我的菜单声音保存在数据库中。这给了我更安全的服务器控制，处理允许/拒绝操作的用户级别的权限。如果你只对客户端感兴趣，你可以简单地在路由模块上添加一个变量：
{ path: 'profile/:user_level', component: ProfileComponent }
Then you can implement the differences inside your components. How to ensure that a user can see only contents for his level? Just implement a control that checks if the session user is trying to see a content that's not for him. (Example inside 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
});
}
}
回答by Amit Goel
You should do two things: 1. Secure your routes to be accessed by these menu items 2. Do not render these menu items for users who should not have access to these.
您应该做两件事： 1. 保护您的路由以供这些菜单项访问 2. 不要为不应该访问这些菜单项的用户呈现这些菜单项。
Permissions can be database driven. You can protect routes using guards in angular 2 and menu items can be restricted from rendering using ng-if directive.
权限可以是数据库驱动的。您可以使用 angular 2 中的防护来保护路线，并且可以使用 ng-if 指令限制菜单项的呈现。
https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html
https://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html
