Blazor 中基于角色的授权

介绍

Blazor用于使用 .NET 代码库创建交互式客户端 Web UI。Microsoft 默认在 Blazor 应用程序中提供了一个用于身份验证和授权的身份框架。请注意,他们目前使用 MVC Core Razor 页面作为身份验证 UI。使用“Microsoft.AspNetCore.Identity.UI”包库来实现这一点。将来,他们可能会用 Razor 组件替换它。在这篇文章中,我们可以看到如何为 Blazor 应用程序添加身份验证和授权,并使用用户角色限制页面。我将逐步解释所有这些操作。

在Visual Studio中选择Blazor模板,然后单击身份验证下的“更改”选项。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

选择“个人用户帐户”类型并保留默认的“在应用程序内存储用户帐户”以便在本地存储身份框架的 SQL 表。

选择认证类型后,您可以点击“创建”按钮来创建项目。

如果您检查 NuGet 包管理器,您会看到下面的包已自动安装在项目中。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

您还可以注意到,“Migrations”文件夹下与“ApplicationDbContext”类文件一起创建了一个迁移脚本文件。

我们可以执行下面的包管理器控制台命令来创建与身份框架相关的 SQL 数据库和表。如果需要,您可以修改 appsettings.json 文件中的 SQL 连接字符串。默认情况下,appsettings.json 文件中会给出一个唯一的数据库名称。

更新数据库

上述命令将为身份用户和角色创建一个新的数据库以及数据库中的七张表。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们不会在 Blazor 应用程序中使用所有这七个表。我们将使用“AspNetUsers”表来存储用户信息。我们将使用“AspNetRoles”表来存储角色信息。我们还将使用“AspNetUserRoles”表来存储用户的角色详细信息。

我们可以通过以下更改来修改“Startup”类中的“ConfigureServices”方法。这样我们就可以在应用程序中使用身份角色来控制授权。

Startup 类中的 ConfigureServices 方法。

public void ConfigureServices(IServiceCollection services)
{services.AddDbContext<ApplicationDbContext>(options =>options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));services.AddDefaultIdentity<IdentityUser>().AddRoles<IdentityRole>().AddEntityFrameworkStores<ApplicationDbContext>();services.AddRazorPages();services.AddServerSideBlazor();services.AddScoped<AuthenticationStateProvider, RevalidatingIdentityAuthenticationStateProvider<IdentityUser>>();services.AddSingleton<WeatherForecastService>();
}

我们可以运行应用程序,点击注册按钮来创建两个不同的用户。默认情况下,不会为这些用户添加任何角色。我们将为每个用户添加不同的角色。

我们可以通过点击“注册”按钮来创建一个新用户。

我们已经创建了一个新的用户“ adminuser@gmail.com ”作为用户名。我们可以再创建一个用户“ normaluser@gmail.com ”。目前,没有创建任何角色。我们可以将两个角色“Admin”和“Normal”添加到表“AspNetRoles”中。

我们可以将用户角色添加到“AspNetUserRoles”表中。我们需要一个用户 ID 和一个角色 ID。您可以从 AspNetUsers 表中复制相应的用户 ID。

我添加了具有管理员角色 ID 的第一个用户和具有普通角色 ID 的第二个用户。

我们可以在“Pages”文件夹中创建两个 Razor 组件“Admin”和“Normal”。Admin 组件可供管理员用户访问,而 Normal 组件可供管理员和普通用户访问。稍后我们必须使用 Authorize 属性修饰这些组件。

我们可以用同样的方式创建第二个组件“Normal”。

修改共享组件“NavMenu”,并进行以下更改。这样,这些新组件将仅对授权用户可见。

NavMenu.razor

<p class="top-row pl-4 navbar navbar-dark"><a class="navbar-brand" href="">BlazorAuth</a><button class="navbar-toggler" @onclick="ToggleNavMenu"><span class="navbar-toggler-icon"></span></button>
</p><p @class="NavMenuCssClass" @onclick="ToggleNavMenu"><ul class="nav flex-column"><li class="nav-item px-3"><NavLink class="nav-link" href="" Match="NavLinkMatch.All"><span class="oi oi-home" aria-hidden="true"></span> Home</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="counter"><span class="oi oi-plus" aria-hidden="true"></span> Counter</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="fetchdata"><span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data</NavLink></li><AuthorizeView Roles="Admin"><li class="nav-item px-3"><NavLink class="nav-link" href="admin"><span class="oi oi-list-rich" aria-hidden="true"></span> Admin Component</NavLink></li></AuthorizeView><AuthorizeView Roles="Admin, Normal"><li class="nav-item px-3"><NavLink class="nav-link" href="normal"><span class="oi oi-list-rich" aria-hidden="true"></span> Normal Component</NavLink></li></AuthorizeView></ul>
</p>@code {bool collapseNavMenu = true;string NavMenuCssClass => collapseNavMenu ? "collapse" : null;void ToggleNavMenu(){collapseNavMenu = !collapseNavMenu;}
}

我已经使用 Blazor 属性“AuthorizeView”以及“Roles”属性修改了上述组件。第一个 NavLink 被分配了管理员角色,第二个 NavLink 被分配了管理员和普通角色。因此,此链接对管理员和普通用户都可见。再次运行应用程序并以管理员用户身份登录。

我们可以注意到,对于此管理员用户,Admin 组件和 Normal 组件的导航链接是可见的。如果您以普通用户身份登录,则只有 Normal 组件链接可见。您可以注意到一件重要的事情,即使没有登录,这两个组件也可通过直接页面路由访问。我们尚未限制这些组件。我们可以使用“Authorize”属性来限制授权用户使用这些组件。

我们可以通过以下更改来修改 Admin 组件。

我们在此组件中添加了 Authorize 属性以及 Roles 属性。

Admin.razor

@page "/admin"
@attribute [Authorize(Roles = "Admin")]
<h3>Admin Component</h3>
<p>This page is only accessible to users with 'Admin' roles</p>
@code {
}

我们可以通过以下更改来修改 Normal 组件。

Normal.razor

@page "/normal"
@attribute [Authorize(Roles = "Admin, Normal")]
<h3>Normal Component</h3>
<p>This page is only accessible to users with 'Admin' or 'Normal' roles</p>
@code {
}

在上面的组件中,我们用管理员和普通角色修饰了授权属性。

以普通用户身份再次运行应用程序,并尝试通过在浏览器中直接输入路由来访问 Admin 组件。

您将在页面上收到未授权访问错误消息。我们已在两个组件中成功实现基于角色的授权。

结论

在本文中,我们了解了如何创建具有个人用户帐户身份验证的 Blazor 应用程序。我们使用实体框架数据库迁移为身份框架创建了所有七个表。后来,我们通过单击应用程序中的注册按钮添加了两个不同的身份用户。我们已手动将两个角色 Admin 和 Normal 添加到表中。我们还将用户角色添加到另一个表中,并带有相应的用户 ID 和角色 ID。我们在 NavMenu 组件中添加了授权属性,以控制具有相应角色的组件的可见性。我们用 Authorize 属性和 Roles 属性修饰了 Admin 和 Normal 组件,以限制对这些组件的未经授权的访问。这只是一个在 Blazor 应用程序中显示身份验证和授权的基本应用程序。

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

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

相关文章

实战|YOLOv10 自定义目标检测

引言 YOLOv10[1] 概述和使用自定义数据训练模型 概述 由清华大学的研究团队基于 Ultralytics Python 包研发的 YOLOv10&#xff0c;通过优化模型结构并去除非极大值抑制&#xff08;NMS&#xff09;环节&#xff0c;提出了一种创新的实时目标检测技术。这些改进不仅实现了行业领…

基于STM32和人工智能的智能楼宇安防系统

目录 引言环境准备智能楼宇安防系统基础代码实现&#xff1a;实现智能楼宇安防系统 4.1 数据采集模块4.2 数据处理与分析4.3 控制系统4.4 用户界面与数据可视化应用场景&#xff1a;智能楼宇安防管理与优化问题解决方案与优化收尾与总结 1. 引言 随着物联网和人工智能技术的…

考研数学|做完《660》,做《880》还是吃力,怎么办?

880吃力说明基础还是不太扎实&#xff0c;建议配合知能行再刷880。 强化之前做660&#xff0c;然后在强化的时候再做880。 660整体难度属于基础阶段到强化阶段。而且是选填部分的题目&#xff0c;所以还是要做一些其他题 然后说一下推荐的习题册&#xff1a;基础不好先做1800、…

公司电脑加密软件——【中科数安】电脑文件资料透明加密,防泄密系统

中科数安电脑文件资料透明加密防泄密系统介绍 中科数安提供的电脑文件资料透明加密防泄密系统&#xff0c;是一款专为企业电脑终端设计的数据安全解决方案。该系统通过采用先进的透明加密技术和精细化的权限管理&#xff0c;旨在全方位保护公司电脑中存储、处理、传输的各类文…

在同一个 Blazor 应用中结合 SQL-DB 和 MongoDB

介绍 传统上&#xff0c;在单应用程序中&#xff0c;我们对整个应用程序使用单个数据库服务器。但是&#xff0c;我将 SQL 数据库和 MongoDB 结合在同一个应用程序中。此应用程序将是 RDBMS 和 No SQL 数据库的组合。我们将从头开始创建一个 Blazor 应用程序&#xff0c;并使用…

APS计划排程系统如何打破装备使用约束

APS计划排程系统是离散制造型企业在计划控制方向的重要支撑&#xff0c;它提供的是交期预测、订单排产计划、物料采购计划、人力分配计划等等。近些几年来&#xff0c;多品种、小批量、多订单的生产模式&#xff0c;让企业的计划员应接不暇、疲累不堪&#xff0c;传统的人工经验…

C++语法01 基本框架

目录 什么是 C &#xff1f; 新建源程序 保存源程序 程序基本框架 #include using namespace std; int main() return 0; 编译 运行 什么是 C &#xff1f; C语言&#xff0c;是基本的程序设计语言之一【程序设计语言&#xff0c;简单的来说就是编写代码来操控计…

数据库大作业——音乐平台数据库管理系统

W...Y的主页&#x1f60a; 代码仓库分享&#x1f495; 《数据库系统》课程设计 &#xff1a;流行音乐管理平台数据库系统&#xff08;本数据库大作业使用软件sql server、dreamweaver、power designer&#xff09; 目录 系统需求设计 数据库概念结构设计 实体分析 属性分…

PostgreSQL查看表的大小

PostgreSQL查看表的大小 在 PostgreSQL 中&#xff0c;可以使用一系列函数和系统视图来查看表的大小。这些工具可以帮助您获取表的基本存储大小、包括索引和 TOAST 的总大小等信息。下列方法演示了如何获取这些信息。 使用函数查看表的大小 pg_relation_size()&#xff1a;返…

Effective Python

列表与字典 键不在字典 contour counters.get(key,0); 键不在字典&#xff0c;返回默认0. names votes.setdefault(key,[]);键不在字典&#xff0c;关联插入默认值后&#xff0c;返回默认[].

AWS CloudFront怎么计费的?

AWS CloudFront是Amazon Web Services提供的一项内容分发网络(CDN)服务&#xff0c;旨在加快网站、应用程序、视频流和其他Web内容的全球分发速度。通过在全球范围内缓存内容至边缘位置&#xff0c;CloudFront能够减少延迟&#xff0c;提高用户体验。关于CloudFront的计费方式&…

升级必备!Win11专业版镜像下载地址:一键直达!

许多用户想要体验Win11专业版系统的新功能&#xff0c;但不知道Win11专业版在哪下载&#xff1f;接下来小编给大家分享最新的Win11专业版镜像&#xff0c;大家喜欢的话&#xff0c;一键点击下载即可&#xff0c;还可以打开【系统之家官网】寻找自己更喜欢的操作系统。 推荐下载…

c# 协议数据计算陀螺仪的角度,带符号

subStrL str.Substring((76 - 8), 2); subStrH str.Substring((78 - 8), 2); Data[7] (short)(Convert.ToInt16(subStrH, 16) * 256 Convert.ToInt16(subStrL, 16));//角度X subStrL str.Substring((80 - 8), 2); subStrH str.Subst…

JavaScript typeof 运算符详解

JavaScript typeof 运算符详解 JavaScript 中的 typeof 运算符是一个一元运算符&#xff0c;用于确定一个变量的数据类型。它返回一个表示数据类型的字符串。typeof 运算符在 JavaScript 开发中非常常用&#xff0c;尤其是在进行类型检查时。本文将详细介绍 typeof 运算符的使…

大学物理(动量定理)

目录 冲量与动量 质点动量定理 质点系动量定理:​编辑 例题 ​编辑 例题 ​编辑 动量守恒定律:。 例题 ​编辑 例题 ​编辑 角动量 ​编辑 例题 ​编辑 力矩与角动量定理​编辑 角动量守恒定律: ​编辑 例题 冲量与动量 质点动量定理 质点系动量定理: 例题 例…

深入理解JavaScript展开运算符(附Demo)

目录 1. 基本知识2. Demo3. 总结 1. 基本知识 JavaScript ES6中的一个特色 由三个点&#xff08;...&#xff09;组成&#xff0c;主要用于数组和对象的操作可以将数组或对象的元素展开到另外一个数组或对象中 数组中的展开运算符&#xff1a;(将数组中的元素展开为单独的元…

拆分两个单链表

分数 5 作者 李卫明 单位 杭州电子科技大学 1.4 编写程序&#xff0c;输入若干正整数&#xff0c;按从小到大次序建立1个带头结点单链表&#xff0c;设计一个实现单链表分离算法的Split函数&#xff0c;将原单链表中值为偶数的结点分离出来形成一个新单链表&#xff0c;新单…

大型网站优化指南:打造流畅的在线体验

大型网站 大型网站是指具有高并发、大流量、高可用性、海量数据处理能力&#xff0c;并能提供7*24小时不间断服务的网站。 这些网站通常面临用户分布广泛、网络情况复杂、安全环境恶劣等挑战。 同时需要快速适应市场变化和用户需求&#xff0c;通过渐进式的发展策略运营成大型…

深入探索Stable Diffusion:从原理到应用的全面解析

目录 一 Stable Diffusion的基本概念 什么是Stable Diffusion? Stable Diffusion与传统生成模型的区别 二 Stable Diffusion的理论基础 扩散过程的数学描述 马尔可夫链蒙特卡罗方法(MCMC) 三 Stable Diffusion的算法实现 基本步骤 代码实现 四 Stable Diffusion的…

Python类中变量定义详解

✨前言&#xff1a; Python中的类可以定义两种类型的变量&#xff1a;类变量和实例变量。 类变量&#xff08;Class Variables&#xff09;&#xff1a; 类变量是在类级别上定义的变量&#xff0c;它们是对所有实例共享的。这意味着类变量只有一个副本&#xff0c;无论你创建了…