角度2の役割とアクセス許可

Question

私は自分のプロジェクトでangular2とlaravel 5.3を使用しました。ユーザがサーバにログインすると、ユーザの許可を送信して認可を処理します。そこでアクセスできないユーザーからルートを保護するためのガードを書きました。ここ は私のガードクラスのコードです：

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レスポンスに基づいて、コードを読みやすくする独自の「can」サービスを実装することができます。たとえば、次のように

@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から要素を削除します。遅延モジュールと互換性があり、孤立モジュールと互換性があります。そうでない場合は、構文がサポートされます。

は

@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については

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

で使用ライブラリを追加します。