在Angular2中实现基于角色的访问

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个angular2应用程序，我实现了注册和登录模块。登录时收到用户角色和其他详细信息。根据用户的角色，不知道如何正确管理访问。在Angular2中实现基于角色的访问

目前我希望使用Angular2服务来分享整个应用程序中的用户角色和其他详细信息，并根据角色使用“if”条件来管理访问。

请提供有关如何正确执行此操作的任何信息。

回答：

我会通过构建出一个对象从当用户成功登录读取方式这一点。

// when user logs in build out permissions object 
permissions = { 
    dashboardOne: true, 
    dashboardTwo: true 
}

那么你的身份验证服务中，有一个返回根据用户的权限

一个布尔函数 

userHasAccess = (() =>{ 
    return { 
    toDashboardOne:() => { 
     return this.permissions.hasOwnProperty('dashboardOne'); 
    }, 
    toDashboardTwo:() => { 
     return this.permissions.hasOwnProperty('dashboardTwo'); 
    } 
    } 
})();

现在整个应用程序可以调用上面的函数

if(this._authService.userHasAccess.toDashboardOne()){ 
    // do something 
}

我希望这可以帮助你开始。欢呼声

回答：

您可以尝试使用ngx-permissions库来控制角应用程序中的权限和角色。它将从DOM中移除元素的好处，支持延迟加载和隔离模块（然后，支持其他语法）。装载角色 例

import { Component, OnInit } from '@angular/core'; 
import { NgxPermissionsService } from 'ngx-permissions'; 
import { HttpClient } from '@angular/common/http'; 
@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 
    title = 'app'; 
    constructor(private permissionsService: NgxPermissionsService, 
       private http: HttpClient) {} 
    ngOnInit(): void { 
    NgxRolesService 
    .addRole('ROLE_NAME', ['permissionNameA', 'permissionNameB']) 
    NgxRolesService.addRole('Guest',() => { 
     return this.sessionService.checkSession().toPromise(); 
    }); 
    NgxRolesService.addRole('Guest',() => { 
    return true; 
    }); 
    } 
}

模板

<ng-template [ngxPermissionsOnly]="['ADMIN']" (permissionsAuthorized)="yourCustomAuthorizedFunction()" (permissionsUnauthorized)="yourCustomAuthorizedFunction()"> 
    <div>You can see this text congrats</div> 
</ng-template> 
<div *ngxPermissionsOnly="['ADMIN', 'GUEST']"> 
    <div>You can see this text congrats</div> 
</div> 
<div *ngxPermissionsExcept="['ADMIN', 'JOHNY']"> 
    <div>All will see it except admin and Johny</div> 
</div>

更多信息，请参阅使用wiki page

以上是 在Angular2中实现基于角色的访问 的全部内容， 来源链接： utcz.com/qa/260768.html

回到顶部