使用路由数据在模板和路由中进行 Angular 4 权限管理答案

【问题标题】：Angular 4 permissions management in template and route using route data使用路由数据在模板和路由中进行 Angular 4 权限管理
【发布时间】：2017-09-07 02:47:17
【问题描述】：

我想在我的 Angular 应用程序中添加一些权限。成功登录后，我已经拥有当前用户权限列表，并保存在本地存储中。

这是我的权限数据的一些示例

{id: 9, name: "configuration.role.restore", display_name: "Restore Role", description: ""}

我已经搜索过这个，看起来我可以使用 route.data 来解决我的问题，但我不知道如何设置和使用它。

【问题讨论】：

标签： angular permissions routes angular2-routing

【解决方案1】：

我建议尝试使用 ngx-permissions 库来控制 Angular 应用程序中的权限。它将从 DOM 中删除元素的好处，支持延迟加载，否则还支持语法。加载权限示例

import { Component, OnInit } from '@angular/core';
import { NgxPermissionsService } from 'ngx-permissions';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

   constructor(private permissionsService: NgxPermissionsService,
               private http: HttpClient) {}

  ngOnInit(): void {
    const perm = ["ADMIN"];

    this.permissionsService.loadPermissions(perm);

     this.http.get('url').subscribe((permissions) => {
       //const perm = ["ADMIN", "EDITOR"]; example of permissions
       this.permissionsService.loadPermissions(permissions);
    })
  }
}

在模板中的使用

 <ng-template [ngxPermissionsOnly]="['ADMIN']">
     <div>You can see this text congrats</div>
  </ng-template>
    <div *ngxPermissionsOnly="['ADMIN'']">
        <div>Admin will see this</div>
    </div>

  <div *ngxPermissionsExcept="['JOHNY']">
   <div>All will see it except Johny</div>
 </div>

【讨论】：