사용자 권한에 따라 구성 요소를 표시하는 Angular2

Question

간단한 질문이 있습니다. 공통 기능을 여러 구성 요소에 삽입하려면 어떻게해야합니까?

add-users라는 구성 요소가 있는데 관리자 만 볼 수 있습니다. 이를 위해 모든 사용자에게 사용 권한 집합을 추가했으며 사용자에게 볼 수있는 권한이 있는지 확인하는 많은 구성 요소에 공통 기능을 주입하려고합니다. 해커에 대해 걱정하지 마십시오. 백엔드에서 다른 검사가 수행되고 사람들이 자신에게 권한을 추가하더라도 여전히 관리자 기능을 사용할 수 없습니다.

예 :

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

Answer 1

JB Nizet 가장 가까운 답을했다.

사용자가 로그인 할 때마다 자신의 모든 권한이 백엔드에서 프론트 엔드로 전송되어 localStorage 배열에 저장되도록 만들었습니다.

그때 나는이 사람을 도움이 같은

로

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; 
} 
} 

이 구성 요소에 주입 앱 어디서나 호출 할 수 있습니다 내 angular2 응용 프로그램에

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

희망을 글로벌 서비스 클래스를 주입!

Answer 2

CASL이라고하는 동형 인증 라이브러리가 있습니다.

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

을 잘 Angular2 +