【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,一经查实,立即删除!

相关文章

自然语言处理(第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…

Linux开发工具——gdb篇

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

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…

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

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

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

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

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

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

C++标准模板库(STL)

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

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

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

【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…

Unity | 快速修复Animation missing错误

目录 一、背景 二、效果 三、解决办法 一、背景 最近在做2D 骨骼动画相关的Demo&#xff0c;我自己使用Unity引擎进行骨骼绑定并创建了anim后&#xff0c;一切正常&#xff0c;anim也能播放。但是昨天我修改Obj及子物体的名称&#xff08;由中文改为英文&#xff0c;如&…

svg学习

概念 svg 可缩放矢量图形 svg 使用xml格式定义图像 svg 形状 矩形 <rect> <?xml version"1.0" standalone"no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd&q…

OpenCV入门01:图像处理简介/图像的基础操作

项目开源&#xff0c;地址&#xff1a;https://gitee.com/zccbbg/opencv_study 文章目录 图像处理简介灰度图像二值图像彩色图 opencv 介绍图像基础操作图像读取与显示绘制几何图形图像的属性其他操作算数操作加法混合 图像色彩空间转换 图像处理简介 灰度图像 ● 灰度图像是…

VIOOVI干货分享:生产标准工时的计算与观测次数确认

在制造业中&#xff0c;生产标准工时是一个关键指标&#xff0c;它可以帮助企业确定生产效率、评估员工绩效以及优化生产流程。本文将介绍生产标准工时的计算方法&#xff0c;并探讨如何确认观测次数&#xff0c;以充分利用ECRS工时分析软件。 一、生产标准工时的计算 生产标准…

售后客服日常回复必备的话术

致歉安抚通用 1.非常抱歉耽误您宝贵的时间了&#xff0c;这边给您查询一下&#xff0c;请稍等。 2.非常抱歉&#xff0c;给您添麻烦了。这边为您转接售后专员给您处理&#xff0c;请亲稍等。 3.影响到您的购物体验万分抱歉。 4.这边都会给您尽心解决的呢。 5.我非常理解您…

深度解析高防产品---游戏盾

游戏盾是针对游戏行业所推出的高度可定制的网络安全解决方案&#xff0c;游戏盾是高防产品系列中针对游戏行业的安全解决方案。游戏盾专为游戏行业定制&#xff0c;针对性解决游戏行业中复杂的DDoS攻击、游戏CC攻击等问题。游戏盾通过分布式的抗D节点&#xff0c;可以防御TB级大…