在 Angular 2 中应用客户端权限答案

【问题标题】：Applying client side permissions in Angular 2在 Angular 2 中应用客户端权限
【发布时间】：2017-08-18 04:57:42
【问题描述】：

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

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

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

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

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 编辑->
管理员 1 [不应显示编辑]
用户 2 编辑->
用户 3 编辑->

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

提前致谢。

【问题讨论】：

标签： angular typescript

【解决方案1】：

angular 2中有一个叫做guard的概念。也许你可以使用“可以激活守卫”。

Angular 2 roles and permissions

【讨论】：

【解决方案2】：

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

app.module.ts

import { Ng2Permission } from 'angular2-permission';

@NgModule({
  imports: [
    Ng2Permission
  ]
})

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，保护路由。

【讨论】：

'this._permissionService.hasDefined('EDIT_POSTS')' 随着页面刷新变成'undefined'。你知道解决方案吗？

【解决方案3】：

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

【讨论】：