学习ASP.NETCoreBlazor编程系列二十三——登录（3）

转载作者：我是一只小鸟更新时间：2023-02-05 14:31:16

学习ASP.NET Core Blazor编程系列文章之目录

学习ASP.NET Core Blazor编程系列一——综述

学习ASP.NET Core Blazor编程系列二——第一个Blazor应用程序（上）

学习ASP.NET Core Blazor编程系列三——实体

学习ASP.NET Core Blazor编程系列五——列表页面

学习ASP.NET Core Blazor编程系列七——新增图书

学习ASP.NET Core Blazor编程系列八——数据校验

学习ASP.NET Core Blazor编程系列十三——路由（完）

学习ASP.NET Core Blazor编程系列十五——查询

学习ASP.NET Core Blazor编程系列十六——排序

学习ASP.NET Core Blazor编程系列二十——文件上传（完）

学习ASP.NET Core Blazor编程系列二十一——数据刷新

学习ASP.NET Core Blazor编程系列二十二——登录（1）

。

虽然在上一篇文章( 学习ASP.NET Core Blazor编程系列二十三——登录（2） )中我们制作出了登录页面，但那个登录页面，不符合我们平时使用的样式，需要进行修改，同时也没有实现登录验证。这一文章学习如何对Login.razor使用特有的布局组件，实现正常的登录样式，学习使用AuthenticationStateProvider类来进行登录验证.

5、LoginLayout组件

登录页面的布局与之前的内容页面中的布局是不一样的。例如之前的图书编辑页面是有侧边导航栏的，但登录页面显然是不需要的。因此，我们需要单独写一个LoginLayout组件，和默认布局MainLayout分开，只用于Login页面:

1. 在Visual Studio 2022的解决方案资源管理器中，鼠标左键选中“Pages”文件夹，右键单击，在弹出菜单中选择“添加—>Razor组件…”，并将组件命名为“LoginLayout.razor”.

2.在Visual Studio 2022的文本编辑器中打开LoginLayout.razor，我们来创建登录页面的布局。代码中的“/imgs/logo.png”所指定的logo图片，请自行准备。具体代码如下:

                          
                             @inherits LayoutComponentBase 
                             < 
                             div 
                             class 
                             ="container" 
                             > 
                             < 
                             div 
                             class 
                             ="card" 
                             > 
                             < 
                             div 
                             class 
                             ="card-header" 
                             style 
                             ="height:10%" 
                             > 
                             < 
                             div 
                             style 
                             ="margin:10px;" 
                             > 
                             < 
                             div 
                             class 
                             ="row" 
                             > 
                             < 
                             div 
                             class 
                             ="col-8" 
                             > 
                             < 
                             img 
                             src 
                             ="/imgs/logo.png" 
                             style 
                             ="align-self:center" 
                             /> 
                             </ 
                             div 
                             > 
                             < 
                             div 
                             class 
                             ="col-8 text-center" 
                             > 
                             < 
                             span 
                             style 
                             ="color:black; font-size:24px" 
                             > 
                            欢迎使用 @ProductionName 后台管理系统
                             </ 
                             span 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             < 
                             div 
                             class 
                             ="card-body" 
                             Style 
                             ="background-color:white; min-height:500px" 
                             > 
                             < 
                             div 
                             class 
                             ="row" 
                             > 
                             < 
                             div 
                             class 
                             ="col-3" 
                             ></ 
                             div 
                             > 
                             < 
                             div 
                             class 
                             ="col-6" 
                             > 
                             < 
                             div 
                             style 
                             ="margin:100px 0" 
                             > 
                             @Body 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             < 
                             div 
                             class 
                             ="card-footer" 
                             > 
                             < 
                             small 
                             class 
                             ="text-muted" 
                             > 
                            Copyright @Year 图书租赁系统  Powered by .NET 6.0 
                             </ 
                             small 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             @code { private const string ProductionName = "图书租赁"; private int Year = DateTime.Now.Year; }

。

六. 修改Login.razor

1.在Visual Studio 2022的文本编辑器中打开Login.razor，我们修改一下登录页面。具体代码如下:

。

                          
                             @page "/Login" @using BlazorAppDemo.Models @using BlazorAppDemo.Utils @layout LoginLayout @inject NavigationManager NavigationManager 
                             < 
                             div 
                             class 
                             ="card align-items-center" 
                             > 
                             < 
                             div 
                             class 
                             ="card-body my-2" 
                             > 
                             < 
                             h3 
                             > 
                            Login
                             </ 
                             h3 
                             > 
                             < 
                             hr 
                             /> 
                             < 
                             EditForm 
                             Model 
                             ="loginModel" 
                             OnValidSubmit 
                             ="SubmitHandler" 
                             OnInvalidSubmit 
                             ="InvalidHandler" 
                             > 
                             < 
                             DataAnnotationsValidator 
                             /> 
                             < 
                             div 
                             class 
                             ="form-group" 
                             > 
                             < 
                             label 
                             for 
                             ="userName" 
                             > 
                              @HtmlHelper.GetDisplayName(loginModel ,m=> m.UserName)
                             </ 
                             label 
                             > 
                             < 
                             InputText 
                             @bind-Value 
                             ="loginModel.UserName" 
                             class 
                             ="form-control" 
                             id 
                             ="userName" 
                             /> 
                             < 
                             ValidationMessage 
                             For 
                             ="()=>loginModel.UserName" 
                             /> 
                             </ 
                             div 
                             > 
                             < 
                             div 
                             class 
                             ="form-group" 
                             > 
                             < 
                             label 
                             for 
                             ="pwd" 
                             > 
                             @HtmlHelper.GetDisplayName(loginModel ,m=> m.Password)
                             </ 
                             label 
                             > 
                             < 
                             InputPassword 
                             @bind-Value 
                             ="loginModel.Password" 
                             class 
                             ="form-control" 
                             id 
                             ="pwd" 
                             /> 
                             < 
                             ValidationMessage 
                             For 
                             ="()=>loginModel.Password" 
                             /> 
                             </ 
                             div 
                             > 
                             < 
                             span 
                             class 
                             ="form-control-plaintext" 
                             ></ 
                             span 
                             > 
                             < 
                             div 
                             class 
                             ="form-group row" 
                             > 
                             < 
                             div 
                             class 
                             ="col-sm-10" 
                             > 
                             < 
                             button 
                             class 
                             ="btn btn-primary" 
                             > 
                            登录
                             </ 
                             button 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             EditForm 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             div 
                             > 
                             @code { private UserInfo loginModel = new UserInfo(); private void SubmitHandler() { Console.WriteLine($"用户名：{loginModel.UserName} ，密码：{loginModel.Password}"); NavigationManager.NavigateTo("/Index"); } private void InvalidHandler() { Console.WriteLine($"用户名： {loginModel.UserName} ，密码：{loginModel.Password}"); } }

。

7、修改路由与启动页面

如何让Blazor知道当用登录用户是被授权访问的？答案是Blazor提供的AuthenticationStateProvider。如果razor组件使用CascadingAuthenticationState，Blazor在渲染前会检查AuthorizeRouteView中的/AuthorizeView/Authorized, NotAuthorized, Authorizing标签，并根据获取的信息在客户端进行渲染成是授权的UI，还是未授权的UI.

1.在Visual Studio 2022的文本编辑器中打开app.razor，我们来添加CascadingAuthenticationState组件。具体代码如下:

。

                          
                             @using Microsoft.AspNetCore.Components.Authorization 
                             < 
                             CascadingAuthenticationState 
                             > 
                             < 
                             Router 
                             AppAssembly 
                             ="@typeof(App).Assembly" 
                             > 
                             < 
                             Found 
                             Context 
                             ="routeData" 
                             > 
                             < 
                             AuthorizeRouteView 
                             RouteData 
                             ="@routeData" 
                             DefaultLayout 
                             ="@typeof(MainLayout)" 
                             /> 
                             < 
                             FocusOnNavigate 
                             RouteData 
                             ="@routeData" 
                             Selector 
                             ="h1" 
                             /> 
                             </ 
                             Found 
                             > 
                             < 
                             NotFound 
                             > 
                             < 
                             PageTitle 
                             > 
                            Not found
                             </ 
                             PageTitle 
                             > 
                             < 
                             LayoutView 
                             Layout 
                             ="@typeof(MainLayout)" 
                             > 
                             < 
                             h1 
                             > 
                            页面走失！请确认输入的URL是否正确！
                             </ 
                             h1 
                             > 
                             < 
                             p 
                             role 
                             ="alert" 
                             > 
                            Sorry, there's nothing at this address.
                             </ 
                             p 
                             > 
                             </ 
                             LayoutView 
                             > 
                             </ 
                             NotFound 
                             > 
                             </ 
                             Router 
                             > 
                             </ 
                             CascadingAuthenticationState 
                             >

。

2. 在Visual Studio 2022的文本编辑器中打开MainLayou.razor，我们来添加 AuthorizeView 组件。具体代码如下:

。

                          
                             @inherits LayoutComponentBase 
                             < 
                             PageTitle 
                             > 
                            BlazorAppDemo
                             </ 
                             PageTitle 
                             > 
                             < 
                             div 
                             class 
                             ="page" 
                             > 
                             < 
                             div 
                             class 
                             ="sidebar" 
                             > 
                             < 
                             NavMenu 
                             /> 
                             </ 
                             div 
                             > 
                             < 
                             main 
                             > 
                             < 
                             AuthorizeView 
                             > 
                             < 
                             Authorized 
                             > 
                             < 
                             div 
                             class 
                             ="top-row px-4" 
                             > 
                             < 
                             a 
                             href 
                             ="https://docs.microsoft.com/aspnet/" 
                             target 
                             ="_blank" 
                             > 
                            About
                             </ 
                             a 
                             > 
                             </ 
                             div 
                             > 
                             < 
                             article 
                             class 
                             ="content px-4" 
                             > 
                             @Body 
                             </ 
                             article 
                             > 
                             </ 
                             Authorized 
                             > 
                             < 
                             NotAuthorized 
                             > 
                             < 
                             div 
                             style 
                             ="margin: 120px 0; width:100%; text-align: center; color: red;" 
                             > 
                             < 
                             span 
                             style 
                             ="font-size:20px" 
                             > 
                            检测到登录超时，请重新
                             < 
                             a 
                             href 
                             ="/login" 
                             style 
                             ="text-decoration:underline" 
                             > 
                            登录
                             </ 
                             a 
                             > 
                            ！
                             </ 
                             span 
                             > 
                             </ 
                             div 
                             > 
                             </ 
                             NotAuthorized 
                             > 
                             </ 
                             AuthorizeView 
                             > 
                             </ 
                             main 
                             > 
                             </ 
                             div 
                             >

3. 在Visual Studio 2022的菜单栏上，找到“调试-->开始调试”或是按F5键，Visual Studio 2022会生成BlazorAppDemo应用程序，并在浏览器中打开Home页面，这时我们看到的不在是之前的页面，而是一个没有登录的提示信息。如下图。

。

4.使用鼠标左键点击“登录”超连接，页面进入到登录页面。如下图.

。

最后此篇关于学习ASP.NETCoreBlazor编程系列二十三——登录（3）的文章就讲到这里了,如果你想了解更多关于学习ASP.NETCoreBlazor编程系列二十三——登录（3）的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐： Grafana系列文章（八）：GrafanaExplore中的Inspector

文章推荐： .NET6学习笔记（6）——SSL证书的导出和格式转换

文章推荐： SQLSERVER快照隔离级别到底怎么理解?

文章推荐： C/C++内存对齐原则

c# - 学习 C# 有助于或阻碍 VB.NET 学习
关闭。这个问题是opinion-based .它目前不接受答案。想要改进这个问题？更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 9 年前。 Improve
学习.NET8MiniApis入门
介绍篇什么是MiniApis？ MiniApis的特点和优势 MiniApis的应用场景环境搭建系统要求安装MiniApis 配置开发环境基础概念 MiniApis架构概述
Javascript(学习)
我正在从“JavaScript 圣经”一书中学习 javascript，但我遇到了一些困难。我试图理解这段代码: function checkIt(evt) { evt = (evt) ? e
String.intern() 学习
package com.fastone.www.javademo.stringintern; /** * * String.intern()是一个Native方法， * 它的作用是：如果字
macos - 学习 AppleScript
您会推荐哪些资源来学习 AppleScript。我使用具有 Objective-C 背景的传统 C/C++。我也在寻找有关如何更好地开发和从脚本编辑器获取更快文档的技巧。示例提示是“查找要编写脚本的
java - 学习 OpenCMS
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 4年前关闭。 Improve thi
extjs - 学习 ExtJS4
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
f# - 学习 F#
关闭。这个问题不符合 Stack Overflow guidelines 。它目前不接受答案。想改善这个问题吗？更新问题，以便堆栈溢出为 on-topic。 6年前关闭。 Improve this
flutter - 学习 flutter
我是塞内加尔的阿里。我今年60岁(也许这是我真正的问题-笑脸!!!)。我正在学习Flutter和Dart。今天，我想使用给定数据模型的列表(它的名称是Mortalite，请参见下面的代码)。我尝试
powershell - 学习……真的什么都行
关闭。这个问题是off-topic .它目前不接受答案。想改进这个问题？ Update the question所以它是on-topic对于堆栈溢出。 9年前关闭。 Improve this que
cappuccino - 学习 Cappuccino
学习 Cappuccino 的最佳来源是什么？我从事“传统”网络开发，但我对这个新框架非常感兴趣。请注意，我对 Objective-C 毫无了解。最佳答案如上所述，该网站是一个好地方，但还有一些其
java - 学习 HashMap
我正在学习如何使用 hashMap，有人可以检查我编写的这段代码并告诉我它是否正确吗？这个想法是有一个在公司工作的员工列表，我想从 hashMap 添加和删除员工。 public class Staf
jQuery CoffeeScript - 学习
我正在尝试将 jQuery 与 CoffeScript 一起使用。我按照博客中的说明操作，指示使用 $ -> 或 jQuery -> 而不是 .ready() 。我玩了一下代码，但我似乎无法理解我出错
javascript - PHP传递参数给新的字符串(学习)
还在学习，还有很多问题，所以这里有一些。我正在进行 javascript -> PHP 转换，并希望确保这些做法是正确的。是$dailyparams->$calories = $calories;一条
MySQL 使用临时表(学习)
我目前正在学习 SQL，以便从我们的 Magento 数据库制作一个简单的 RFM 报告，我目前可以通过导出两个查询并将它们粘贴到 Excel 模板中来完成此操作，我想摆脱 Excel 模板。我认为
Javascript > PHP (学习)
我知道我很可能会因为这个问题而受到抨击，但没有人问，我求助于你。这是否是一个正确的 javascript > php 转换 - 在我开始不良做法之前，我想知道这是否是解决此问题的正确方法。 JavaS
ruby - 学习/平铺的资源
除了 Ruby-Doc 之外，哪些来源最适合获取一些示例和教程，尤其是关于 Ruby 中的 Tk/Tile？我发现自己更正常了 http://www.tutorialspoint.com/ruby/r
Python 学习。为什么我只在第一次收到警告？
我只在第一次收到警告。这正常吗？ >>> cv=LassoCV(cv=10).fit(x,y) C:\Python27\lib\site-packages\scikit_learn-0.14.1-py
java - 学习/复习Java
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
c# - 学习.NET
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

学习ASP.NETCoreBlazor编程系列二十三——登录（3）

5、LoginLayout组件

六. 修改Login.razor