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

我会带着你远行 2024-03-16 14:14 14阅读 0赞

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

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

## 八、登录首页 ##

### 创建RedirectToLogin组件 ###

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

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

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

![8593acafce4da21767abb2fb752742c2.gif][]

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

![1dddc1128dbed1a8d76e6516743fedf8.gif][]

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

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

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

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

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

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

![63fc53e65c1923b8edda271fba879cd2.gif][]

@using BlazorAppDemo.Pages
    @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>
                    <RedirectToLogin></RedirectToLogin>
                </NotAuthorized>
            </AuthorizeView>     
    
        </main>
    
    </div>

![512d06c6b5cebbb62032d0d47ef69b0b.gif][]

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

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

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

![4a67bc5eaddcd217ba4e01f679f970f3.png][]

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

备注：

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

![2a48a5642058bdd35888fd16b87fdc45.png][]

[8593acafce4da21767abb2fb752742c2.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/a3f8d7fa0db740929391b62af7fbd56b.png
[1dddc1128dbed1a8d76e6516743fedf8.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/55d0d9f0ef2345a48fdfa65bff8c3099.png
[63fc53e65c1923b8edda271fba879cd2.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/61e4c240e17c43259b6ee859ea4bd965.png
[512d06c6b5cebbb62032d0d47ef69b0b.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/8abfc21cacbb49bab109f8246bd9bd6d.png
[4a67bc5eaddcd217ba4e01f679f970f3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/9d3164aafce6486f924e86ea3a0f1a61.png
[2a48a5642058bdd35888fd16b87fdc45.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cc6f0bbe409c404d8d67260bebaef1b7.png