码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 学习ASP.NET Core Blazor编程系列二十五——登录(4)


    学习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)
     

    通过前面三篇文章的学习,我们虽然实现了登录功能,但那还不是我们希望的登录首页。

    我们希望的登录功能,用户在登录图书租赁系统的时候,如果没有进行登录是无法看到任何功能菜单,并且页面一直显示登录页面。

    八、登录首页

          创建RedirectToLogin组件

         这个组件没有其他任何作用,就是在未登录时跳转到登录页面。

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

        2.在Visual Studio 2022的文本编辑器中打开RedirectToLogin.razor,我们来添加未登录转移到登录页面的代码。具体代码如下:

    复制代码
    @inject NavigationManager NavigationManager
    
    @code {
        protected override void OnInitialized()
        {
            base.OnInitialized();
            NavigationManager.NavigateTo("/Login", true);
        }
    }
    复制代码

     

          3. 在Visual Studio 2022的文本编辑器中打开mainlayou.razor,我们修改组件中的登录验证相关的代码。

          在前面的文章中我们在这个组件中添加了AuthorizeView这个Blazor自带的一个授权组件,它内部处理了授权信息,内部有NotAuthorized、Authorized和Authorizing可供使用。

           NotAuthorized即未授权的情况,这种情况如果不写,默认是显示一行文字,Not Authorized。内部是一个RenderFragment,可以添加任何内容。

           Authorizing是正在进行授权认证,此时用来显示相应的文字,我们使用Cookie认证的话一般不会有这种情况,但是如果我们使用统一认证,或者其他网络认证的时候,可能会有等待认证的时间,这时候我们提示信息就要写在这里。

        Authorized是用户获得了授权之后,在这里可以显示相应的内容。

          我们实现的是一个未登录就跳转到登录页面的功能,所以我们就在NotAuthorized的时候加载我们的RedirectToLogin的组件即可。具体代码如下:

    复制代码
    @using BlazorAppDemo.Pages
    @inherits LayoutComponentBase
     
    <PageTitle>BlazorAppDemoPageTitle>
     
    <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">Abouta>
            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>
                    <RedirectToLogin>RedirectToLogin>
                NotAuthorized>
            AuthorizeView>     
    
        main>
    
    div>
    复制代码

     

    说明:我将前文中的提示文字保留,实际上我们并没有看到。

    • mainlayou.razor中的AuthorizeView,限制只有通过授权的用户才能成功登录系统。

          4. 在Visual Studio 2022的菜单栏上,找到“调试-->开始调试”或是按F5键,Visual Studio 2022会生成BlazorAppDemo应用程序,并在浏览器中打开的不在是Index页面,这时我们看到的将是Login登录页面。如下图。

     

     

    5.我们输入用户名与密码,进行模拟登录。页面无法进入首页面,永远在登录页面,这是由于我们并没有实现AuthenticationStateProvider的原因。

     

    备注:

           RedirectToLogin中的代码NavigationManager.NavigateTo("/Login", true);方法在Debug时会报错,在.net 6上目前没找到什么合适的解决办法。这里报错就直接点击继续,不会有任何其他影响,并且Release下不会报错。如图:

     

     

     
  • 相关阅读:
    c语言数据结构 二叉树(二)
    基于SSM技术的oa办公管理系统的设计与实现毕业设计源码100934
    docker-compose一键启动neo4j
    MapStruct代码生成器使用
    用户虚拟地址转化成物理地址,物理地址转换成内核虚拟地址,内核虚拟地址转换成物理地址,虚拟地址和对应页的关系
    C. Carrying Conundrum(思维 + 奇偶数位)
    10 个关于 Promise 和 setTimeout 知识的面试题,通过图解一次说透彻
    SLAM ORB-SLAM2(3)例程试用
    【安信可ESP-12K模组】
    【HMS core】【FAQ】Account Kit、push Kit典型问题合集1
  • 原文地址:https://www.cnblogs.com/chillsrc/p/17113633.html
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号