在Angular 2中应用客户端权限

Question

我正在创建一个简单的Angular 2应用程序，其中我需要应用客户端权限（不用说服务器端也应用了权限，但隐藏用户不应该看到的组件是必要的。）

我还不熟悉Angular提供的所有东西，所以我很想知道为了实现这样的功能，可接受的方式。

或者如果可能的话，我希望收到一些关于我在下面采取的方法的评论：

用户登录后，他会收到他拥有的权限列表，例如：

• READ_POSTS
• EDIT_POSTS
• READ_USERS
• EDIT_USERS

例如，这些将确定用户是否应该看到应用程序周围的编辑按钮。

然后我创建了一个指令（基本上是*ngIf的副本），它检查用户是否具有针对UserService权限，该UserService包含用户拥有的权限列表。

这基本上是指令的作用：

if (hasPermissions) {
  this.viewContainer.createEmbeddedView(this.templateRef);
}
else {
  this.viewContainer.clear();
}

它使用如下：

<div id="someContainer">
  <a *myPermissionDirective="'EDIT_POSTS'">Edit Post</a>
</div>

我对这种方法的主要问题是它似乎变得丑陋的通用组件包含一些应该显示的元素和一些不 应该显示的元素。

例如，假设我们用来显示列表的名为listComponent的组件，我们将根据您拥有的权限使用它来显示能够编辑它们的用户列表:(目前，您无法编辑其他管理员用户）

• 用户1编辑 - >
• 管理员1 [不应显示编辑]
• 用户2编辑 - >
• 用户3编辑 - >

在非通用列表组件中，例如UserListComponent可能我们可以引用用户特定权限，但由于我们使用的是通用权限，我们如何知道哪些是相关的？：EDIT_POSTS，EDIT_USERS，EDIT_ADMIN_USERS，EDIT_ARTICLE，EDIT_SYSTEM_SETTINGS等“

提前致谢。

Answer 1

在角度2有概念称为守卫。可以使用“可以激活卫兵”。

Angular 2角色和权限

Answer 2

对于angular2应用程序的管理权限和访问控制，您可以使用ng2-permission模块。

app.module.ts

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

login.component.ts

import { PermissionService } from 'angular2-permission';

@Component({
    selector: 'app-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
    //...

    constructor(private _permissionService: PermissionService) { }

    login() {
        this._permissionService.clearStore();
        this._permissionService.define(['READ_POSTS', 'EDIT_POSTS', 'READ_USERS', 'EDIT_USERS']);
    }
}

*。html的

<div id="someContainer">
  <a [hasPermission]="['EDIT_POSTS']">Edit Post</a>
</div>

如果EDIT_POSTS已定义或添加到权限存储中，则将显示“ Edit Post链接。

您还可以使用Ng2Permission模块中的PermissionGuard来保护路由。

Answer 3

您还可以使用使用相同方法的ngx-permissions库，如果您来自角度1，它看起来有点不寻常，但它是从DOM中删除对象而不是用css隐藏它的唯一方法。