【Angular 】Angular 模板中基于角色的访问控制

【Angular 】Angular 模板中基于角色的访问控制_第1张图片

您是否在Angular模板中实现角色库访问控制?一种方法是通过*ngIf,但我不会选择该路径,因为它将在Angular模板中包含自定义函数,并且很难维护。正确的方法是使用Angular结构指令.

什么是RBAC?

基于角色的访问控制(RBAC)是指根据用户在组织中的角色为其分配权限的想法。它提供了一种简单、可管理的访问管理方法,与单独为用户分配权限相比,这种方法更不容易出错。

实施

假设我们有一个具有3个属性的帐户接口:id、name和roles。角色是枚举类型的数组,可以表示我们的帐户可以具有的不同角色,包括ADMIN、USER、EDITOR、VIEWER。

export interface IAccount {
    id: number;
    name: string;
    roles: ERoles[]
}

export enum ERoles {
    admin = 'ADMIN',
    user = 'USER',
    editor = 'EDITOR',
    viewer = 'VIEWER'
}

而不是 *ngIf 我们想要一个自定义结构指令,它接受应该显示模板的角色以及可以检查哪些角色的帐户。

import { Directive, Input, OnChanges, TemplateRef, ViewContainerRef } from '@angular/core';
import { ERoles, IAccount } from '../../interfaces/account.interface';

@Directive({
    selector: '[hasRoles]'
})
export class HasRolesDirective implements OnChanges {
    private visible: boolean;
    private roles: ERoles[];
    private account: IAccount;

    @Input() set hasRoles(roles: ERoles[]) {
        this.roles = roles;
    }

    @Input('hasRolesFor') set hasRolesFor(account: IAccount) {
        this.account = account;
    };

    constructor(private templateRef: TemplateRef, private viewContainer: ViewContainerRef) {}

    ngOnChanges(): void {
        if (!this.roles?.length || !this.account) {
            return;
        }

        if (this.visible) {
            return;
        }

        // check if account roles include at least one of the input roles
        if (this.account.roles.some(role => this.roles.includes(role))) {
            this.viewContainer.clear();
            this.viewContainer.createEmbeddedView(this.templateRef);
            this.visible = true;

            return;
        }

        this.viewContainer.clear();
        this.visible = false;
    }

}

如何使用它?

特别是在组件的typescript文件中,您需要帐户和角色数组(为了类型安全),如下所示:

account: IAccount = {
    id: 1,
    name: 'Klajdi',
    roles: [ERoles.editor],
};

roles: typeof ERoles = ERoles;

然后在您想要的任何模板的HTML标记中使用它。我将在下面展示两个示例:

Editor only
User and viewer only

这就是它在浏览器中打印的内容:

【Angular 】Angular 模板中基于角色的访问控制_第2张图片

我们有了它。由于我只给了我的帐户EDITOR的角色,它只能看到EDITOR的div.

现在更容易处理角色了。该指令可扩展到您想要应用的任何其他逻辑。您可以为它编写单元测试,这样新的开发人员在编写新代码时就不会破坏逻辑。在每个模板中使用*ngIf是我们无法想象的。

就是这样

像往常一样,感谢您的阅读。我很感激你花时间阅读我的内容和故事。我希望你能觉得这篇文章有用。如果你喜欢,就给它 并且毫不犹豫地跟随。

敬请关注,编码快乐!

本文:【Angular 】Angular 模板中基于角色的访问控制 | 开发者开聊

自我介绍

  • 做一个简单介绍,酒研年近48 ,有20多年IT工作经历,目前在一家500强做企业架构.因为工作需要,另外也因为兴趣涉猎比较广,为了自己学习建立了三个博客,分别是【全球IT瞭望】,【架构师研究会】和【开发者开聊】,有更多的内容分享,谢谢大家收藏。
  • 企业架构师需要比较广泛的知识面,了解一个企业的整体的业务,应用,技术,数据,治理和合规。之前4年主要负责企业整体的技术规划,标准的建立和项目治理。最近一年主要负责数据,涉及到数据平台,数据战略,数据分析,数据建模,数据治理,还涉及到数据主权,隐私保护和数据经济。 因为需要,比如数据资源入财务报表,另外数据如何估值和货币化需要财务和金融方面的知识,最近在学习财务,金融和法律。打算先备考CPA,然后CFA,如果可能也想学习法律,备战律考。
  • 欢迎爱学习的同学朋友关注,也欢迎大家交流。全网同号【架构师研究会】

欢迎收藏  【全球IT瞭望】,【架构师酒馆】和【开发者开聊】.

你可能感兴趣的:(Web开发,前端开发,全栈开发,angular.js,前端,javascript)