Angular2根据用户权限显示组件

我有一个简单的问题。我怎样才能将一个通用功能注入到许多组件中。Angular2根据用户权限显示组件

我有一个名为add-users的组件，我希望这只能由管理员看到。为此，我向所有用户添加了一组权限，并且我想将一个通用函数注入到许多组件中，以检查用户是否有权查看它们。不要担心黑客，因为另一项检查是在后端完成的，即使人们向自己添加权限，他们仍然无法使用管理功能。

例子：

<add-users [required-permissions]></add-users>

来源

2016-08-15 Karl Johan Vallner

嘛，定义服务，并在需要它的成分注入它。 https://angular.io/docs/ts/latest/guide/dependency-injection.html –

为什么不使用authGuards？ http://blog.thoughtram.io/angular/2016/07/18/guards-in-angular-2.html – cptnk

我已经实施了authguards，但我不想阻止整个应用程序的用户，而只是一些每个人都能看到的按钮等等。 –

JB Nizet有最接近的答案。

我做到这样，每当用户登录他的所有权限时，都会从后端发送到前端并存储在localStorage阵列中。

然后我注入了全球性的服务类为我angular2应用

import { Injectable, Inject } from '@angular/core'; 
import { Observable } from "rxjs/Observable"; 

import globals = require('./../globals'); 

import { ShoppingCart } from './../Models/ShoppingCart'; 

@Injectable() 
export class PermissionsEngine { 
private userPermissions: Array<String> = Array<String>(); 
private permissionsString = ""; 

constructor() { 
    this.calcPermissions(); 
} 

calcPermissions() { 
    this.permissionsString = localStorage.getItem("permissions"); 
    if (this.permissionsString) { 
     this.userPermissions = this.permissionsString.split(","); 
    } else { 
     this.userPermissions = new Array<String>(); 
    } 
} 

hasPermission(_slug: string) { 
    if (this.userPermissions.indexOf(_slug) != -1) { 
     return true; 
    } 

    return false; 
} 
}

这可注入部件，并从应用的任何称为这样

<div *ngIf="_permissionsEngine.hasPermission('add_users')"></div>

希望这可以帮助别人！

来源

2016-08-20 21:11:42

有一个称为CASL的同构授权库。你可以阅读有关其在奥里利亚应用集成：

https://medium.com/@sergiy.stotskiy/casl-based-authorization-in-aurelia-app-3e44c0fe1703

，并通过自定义做类似的方式can管在Angular2 +

来源

2017-07-27 16:55:52 Serjio

Angular2根据用户权限显示组件

回答

相关问题