【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 rolesif (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是我们无法想象的。😀

就是这样

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

敬请关注,编码快乐!

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

自我介绍

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/584145.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

MySQL常见面试题汇总

Java面试题总结 MySQL面试题 MySQL 字段类型 整数类型的 UNSIGNED 属性有什么用&#xff1f; CHAR 和 VARCHAR 的区别是什么&#xff1f; VARCHAR(100)和 VARCHAR(10)的区别是什么&#xff1f; DECIMAL 和 FLOAT/DOUBLE 的区别是什么&#xff1f; 为什么不推荐使…

自然语言处理(第16课 机器翻译4、5/5)

一、学习目标 1.学习各种粒度的系统融合方法 2.学习两类译文评估标准 3.学习语音翻译和文本翻译的不同 4.学习语音翻译实现方法 二、系统融合 以一个最简单的例子来说明系统融合&#xff0c;就是相当于用多个翻译引擎得到不同的翻译结果&#xff0c;然后选择其中最好的作为…

【网络安全 | XCTF】2017_Dating_in_Singapore

正文 题目描述&#xff1a; 01081522291516170310172431-050607132027262728-0102030209162330-02091623020310090910172423-02010814222930-0605041118252627-0203040310172431-0102030108152229151617-04050604111825181920-0108152229303124171003-261912052028211407-0405…

如何有效使用 .gitignore 文件

在任何使用 Git 的软件项目中&#xff0c;.gitignore 文件都是一个必不可少的工具。它帮助开发者定义哪些文件和目录应该被 Git 忽略&#xff0c;从而保持代码库的整洁和管理的简便性。 什么是 .gitignore&#xff1f; .gitignore 文件是一个文本文件&#xff0c;您可以在其中指…

Linux开发工具——gdb篇

Linux下调试工具——gdb 文章目录 makefile自动化构建工具 gdb背景 gdb的使用 常用命令 总结 前言&#xff1a; 编写代码我们使用vim&#xff0c;编译代码我们使用gcc/g&#xff0c;但是我们&#xff0c;不能保证代码没问题&#xff0c;所以调试是必不可少的。与gcc/vim一样&…

CSS日常总结--CSS伪类

CSS日常总结–CSS伪类 文章目录 CSS日常总结--CSS伪类前言1.结构性伪类:1. :first-child&#xff1a;选择父元素下的第一个子元素2. :last-child&#xff1a;选择父元素下的最后一个子元素3. :nth-child(n)&#xff1a;选择父元素下的第n个子元素4. :nth-last-child(n)&#xf…

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK获取相机当前实时帧率(C++)

Baumer工业相机堡盟工业相机如何通过NEOAPI SDK获取相机当前实时帧率&#xff08;C&#xff09; Baumer工业相机Baumer工业相机的帧率的技术背景Baumer工业相机的帧率获取方式CameraExplorer如何查看相机帧率信息在NEOAPI SDK里通过函数获取相机帧率&#xff08;C&#xff09; …

从方程到预测:数学在深度学习中的作用

图片来源 一、说明 深度学习通常被认为是人工智能的巅峰之作&#xff0c;它的成功很大程度上归功于数学&#xff0c;尤其是线性代数和微积分。本文将探讨深度学习与数学之间的深刻联系&#xff0c;阐明为什么数学概念是该领域的核心。 二、数学框架 从本质上讲&#xff0c;深度…

水经微图IOS版即将发布!

我们从上周开始&#xff0c;已经在着手提交产品到苹果商店等相关工作&#xff0c;但又恰逢“圣诞节”&#xff0c;据说这会导致延长审核周期。 正所谓行百里者半九十&#xff0c;我们现在只需要耐心等待审核通过&#xff0c;到时大家就可以在苹果商店中下载安装了。 IOS版功能…

echarts半圆进度条半圆饼图

drawmonthproduce(){this.monthproduce echarts.init(document.getElementById(monthproduce));var data 60; //数值大小var max 100; //满刻度大小this.monthproduce.setOption({title: [{text: data %, left: 50%,top: 70%,textAlign: center,textStyle: {// fontWeight…

C语言rand函数,srand函数,time函数实现随机数,及猜数字小游戏

怀心之所爱&#xff0c;奔赴山河 前言 最近在复习c的知识&#xff0c;想起之前写过一个猜数字小游戏&#xff0c;所以今天就把自己关于随机数的使用经验分享一下&#xff0c;希望对大家有帮助。 一.rand函数 1.函数的声明如下 可以看到&#xff0c;返回值是int类型&#xff…

Miniconda 与 Anaconda 的区别

Miniconda 与 Anaconda 的区别 包含的包: Anaconda: 是一个较大的发行版&#xff0c;预装了大量的科学计算和数据分析相关的 Python 包。Miniconda: 更轻量级&#xff0c;只包含 Conda、Python 和它们的依赖&#xff0c;以及少量常用包。 安装体积: 由于预装了许多包&#xff…

人工智能的基础-深度学习

什么是深度学习? 深度学习是机器学习领域中一个新的研究方向&#xff0c;它被引入机器学习使其更接近于人工智能。 深度学习是机器学习领域中一个新的研究方向&#xff0c;它被引入机器学习使其更接近于最初的目标——人工智能。 深度学习是学习样本数据的内在规律和表示层次&…

优维携手深职大共建“中国高校‘双碳’技能仿真操作系统”!

优维“双碳”战略合作高校 优维科技与深圳职业技术大学碳中和技术研究院&#xff08;深职碳研院&#xff09;签署战略合作协议&#xff0c;深化产学研&#xff0c;聚力创新“双碳”发展。在“双碳”目标大背景下&#xff0c;优维科技和深职碳研院将携手共同开发中国高校“双碳…

主动红外探测器,预计到2026年将达到16 亿美元

主动红外探测器&#xff0c;也称为运动传感器&#xff0c;是一种通过发射红外辐射并检测反射来检测移动物体存在的电子设备。它们广泛用于安全系统、自动门、照明控制和其他需要运动检测的应用。近年来&#xff0c;由于对安全系统的需求不断增加以及智能家居和建筑的发展&#…

关于java循环结构while和do…while

关于java循环结构while和do…while 前面的文章中我们了解到了java的选择结构&#xff0c;本篇文章我们来了解一下java的循环结构&#x1f600;。 循环结构 while 循环do…while 循环for 循环 while循环 while循环是循环结构中的一种&#xff0c;也是最基本的循环。while循…

C++标准模板库(STL)

标准模板库&#xff08;STL&#xff09;是一组C模板类&#xff0c;提供常见的编程数据结构和函数&#xff0c;如列表、堆栈、数组等。它是一个容器类、算法和迭代器的库。它是一个通用库&#xff0c;因此&#xff0c;它的组件是参数化的。模板类的相关知识是使用STL的先决条件。…

使用Jenkins和单个模板部署多个Kubernetes组件

前言 在持续集成和部署中&#xff0c;我们通常需要部署多个实例或组件到Kubernetes集群中。通过Jenkins的管道脚本&#xff0c;我们可以自动化这个过程。在本文中&#xff0c;我将演示如何使用Jenkins Pipeline及单个YAML模板文件&#xff08;.tpl&#xff09;来部署多个类似的…

Python开发GUI常用库PyQt6和PySide6介绍之三:交互和通信方式讲解

Python开发GUI常用库PyQt6和PySide6介绍之三&#xff1a;交互和通信方式讲解 在PyQt6和PySide6中&#xff0c;事件&#xff08;Event&#xff09;和信号&#xff08;Signal&#xff09;是两个不同的概念&#xff0c;它们都是Qt框架中用于处理不同类型的应用程序响应机制。简言…

【Mars3d】官网示例与项目仓库的历史版本下载

【Mars3d】官网示例与项目仓库的历史版本下载 1.进入官网仓库&#xff1a; mars3d-vue-example: mars3d功能示例&#xff0c;Vue版本 2.以下载3.4.26版本的历史示例为例 <一>建议先 git clone https://gitee.com/marsgis/mars3d-vue-example.git <二>使用vsco…