Angular 2 角色和权限答案

【问题标题】：Angular 2 roles and permissionsAngular 2 角色和权限
【发布时间】：2017-02-06 13:26:22
【问题描述】：

我在我的项目中使用了 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 的特定部分。遇到这种情况怎么办？

【问题讨论】：

标签： angular angular2-routing angular2-guards

【解决方案1】：

您应该将权限存储在服务本身而不是守卫中。

因此，当用户进行身份验证时，您将权限存储在身份验证服务的属性中。然后在守卫中，调用this.authService.<property> 来使用权限。在任何其他组件中，您都可以这样做，this.authService.<property> 以获取用户的权限级别

由于服务将作为单例传递，所有组件都可以访问相同的属性。

【讨论】：

感谢您的回答。但是当用户重新加载页面时，那又如何。我认为将权限保存在本地存储中，但它不安全。你有什么建议？
本地存储/会话存储将是您的选择，但只存储您需要的内容，显然不是用户名/密码组合。我确信有办法使用 JWT 之类的东西来做到这一点，但我还没有这方面的经验。
JWT 是在客户端安全存储身份验证的趋势方法。

【解决方案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">

【讨论】：

我想知道这是否是最好的方法，因为它看起来很棒而且更干净

【解决方案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);
    })
  }

在模板中使用

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

如需更好的文档，请访问wiki page。

【讨论】：