Angular 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響應，您可以實現自己的“can”服務，這使得代碼更具可讀性。 例如：

@Injectable()
export class UserCan {

  constructor (private _auth: AuthService)
  {

  }

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

}

在你的Component你可以注入它：

export class YourComponent {
  private canDoWhatever: boolean;

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

}

最后在你的HTML中：

<div *ngIf="canDoWhatever">

Answer 3

對於正在尋找圖書館的人，您可以查看ngx權限 。 它將從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);
    })
  }

在模板中使用

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

有關更好的文檔，請訪問Wiki頁面 。