Question

我有一个简单的问题。如何将常用功能注入到许多组件中。

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

示例：

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

Answer 1

JB Nizet得到了最接近的答案。

我做到这一点，每当用户登录时，他/她的所有权限都会从后端发送到前端并存储在localStorage数组中。

然后我将全局服务类注入了我的angular2 app

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>

希望这有助于某人！

Answer 2

有一个称为CASL的同构授权库。您可以在Aurelia app中了解它的集成：

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

通过Angular2 +

中的自定义can管道以类似方式执行此操作

Angular2根据用户权限显示组件

2 个答案: