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

您是否在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<unknown>, 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标记中使用它。我将在下面展示两个示例：

<div *hasRoles="[roles.editor]; for: account">Editor only</div>
<div *hasRoles="[roles.user, roles.viewer]; for: account">User and viewer only</div>

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

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

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

就是这样

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

敬请关注，编码快乐！