Question

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

我还不熟悉Angular所提供的一切，所以我很想知道为了实现这样的功能，接受什么方式。

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

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

READ_POSTS
EDIT_POSTS
READ_USERS
EDIT_USERS

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

然后我创建了一个指令（基本上是*ngIf的副本），用于检查用户是否拥有保存用户权限列表的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编辑 - ＆gt;
管理员1 [不应显示编辑]
用户2编辑 - ＆gt;
用户3编辑 - ＆gt;

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

提前致谢。

Answer 1

在角度2中有称为守卫的概念。也许你可以使用＆＃34;可以激活Guard＆＃34;。

Angular 2 roles and permissions

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 Post已经定义或添加到权限存储中，则会显示

EDIT_POSTS链接。

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

Answer 3

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

在Angular 2中应用客户端权限

3 个答案: