각도 2 역할 및 권한

Question

내 프로젝트에서 angular2 및 laravel 5.3을 사용했습니다. laravel에서 사용자가 서버에 로그인 할 때 인증 권한을 처리 할 사용자 권한을 보냅니다. 그래서 나는 액세스 할 수없는 사용자로부터 경로를 보호하기 위해 경비원을 썼다.

export class AccessGuard implements CanActivate{ 

permissions; 
currentRoute; 
constructor(private authService:AuthService,private router:Router){ 
    this.permissions = this.authService.getPermissions(); 
} 

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 
    return this.checkHavePermission(state.url); 
} 

canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot){ 
    return this.checkHavePermission(state.url); 
} 

private checkHavePermission(url){ 
    switch (true) { 
     case url.match(/^\/panel\/users[\/.*]?/): 
      return this.getPermission('user.view'); 
     case url.match(/^\/panel\/dashboard/): 
      return true; 
     case url.match(/^\/panel\/permissions/): 
      return this.getPermission('permissions.manager'); 
     case url.match(/^\/panel\/candidates[\/.*]?/): 
      return this.getPermission('candidate.view'); 
    } 
} 


getPermission(perm){ 
    for(var i=0;i<this.permissions.length;i++){ 
     if(this.permissions[i].name == perm){ 
      return true; 
     } 
    } 
    return false; 
} 

} 

지금 경로가 고정되어 있는지 내가 어떻게 구성 요소 클래스 내부의 사용자 권한에 액세스 할 수 있는지 궁금 : 여기 내 가드 클래스 코드입니다. 때로는 사용자가 경로에 액세스 할 수 있지만 dom의 특정 부분을 볼 수 없기 때문입니다. 이런 상황을 어떻게 처리 할 수 ​​있습니까?

Answer 1

가드 대신 서비스 자체에 사용 권한을 저장해야합니다.

그래서 인증을 사용할 때 인증 서비스의 등록 정보에 사용 권한을 저장합니다. 그런 다음 가드에서 this.authService.<property>으로 전화하여 권한을 사용합니다. 다른 구성 요소에서 사용자의 권한 등급을 얻으려면 this.authService.<property>을 수행 할 수 있습니다.

서비스가 싱글 톤으로 전달되므로 모든 구성 요소는 동일한 속성에 액세스 할 수 있습니다.

Answer 2

@Dave V 응답을 기반으로 코드를 좀 더 읽기 쉽게 만드는 "캔"서비스를 구현할 수 있습니다. 예를 들어 :

@Injectable() 
export class UserCan { 

    constructor (private _auth: AuthService) 
    { 

    } 

    public canDoWhatever() 
    { 
    return (this._auth.roles.indexOf("Whatever") > -1); 
    } 

} 

그리고 당신의 Component의의를 당신은 그것을 주입 할 수 있습니다 : 당신의 HTML에서

export class YourComponent { 
    private canDoWhatever: boolean; 

    constructor(private _userCan: UserCan) { 
    this.canDoWhatever = _userCan.canDoWhatever(); 
    } 

} 

마지막을 : 라이브러리를 찾고 누군가

<div *ngIf="canDoWhatever"> 

Answer 3

, 당신 체크 아웃하실 수 있습니다 ngx-permissions. DOM에서 요소를 제거합니다. 지연 모듈과 호환되며 격리 모듈과 호환 가능합니다. 그렇지 않으면 구문이 지원됩니다. 템플릿 더 나은 문서에 대해서는

<div *ngxPermissionsOnly="['ADMIN', 'GUEST']"> 
    <div>You can see this text congrats</div> 
</div> 

에서

추가 라이브러리

@NgModule({ 

    imports: [ 
    BrowserModule, 
    NgxPermissionsModule.forRoot() 
    ], 

}) 
export class AppModule { } 

로드 권한

는

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

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

    this.permissionsService.loadPermissions(perm); 

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

사용, wiki page를 방문하십시오.