时间戳

首页 > 解决方案 > Blazor WASM 在未通过身份验证时重定向到登录 - 不显示布局

blazor - Blazor WASM 在未通过身份验证时重定向到登录 - 不显示布局

问题描述

我有Blazor WASM2 种布局：

  1. 主布局
  2. 登录布局

我的主Index文件有一个 Authorized 属性

@page "/"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]

当它未经授权被重定向到“auth/login”时，它使用不同的布局（LoginLayout），我有一个简单的登录页面。

我面临的问题是，当我访问应用程序时，我可以看到一秒钟MainLayout（页眉、导航左侧菜单、页脚），然后我看到我的空白屏幕和我的登录信息。

这意味着因为Index是主要路线并使用MainLayout，所以需要大约 1 秒的时间来验证并重定向到我的登录页面，这就是布局问题的原因。

有没有办法MainLayout在页面中呈现之前进行重定向？或者如果用户未通过身份验证，则不显示布局 HTML 的方法？

标签： blazorblazor-client-sideblazor-webassembly

解决方案

试试下面的代码......我在带有个人身份验证的 WebAssembly 中对其进行了表面测试，看起来还不错。如果用户未通过身份验证，并且 Index 组件使用 Authorize 属性进行了注释，则他将被重定向到登录页面，而不会看到 MainLayout。

将 MainLayout.razor 中的代码更改为以下内容：

@inherits LayoutComponentBase

<AuthorizeView>
    <Authorized>
        <div class="sidebar">
            <NavMenu />
        </div>

        <div class="main">
            <div class="top-row px-4 auth">
                <LoginDisplay />
                <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
            </div>

            <div class="content px-4">
                @Body
            </div>
        </div>

    </Authorized>
    <NotAuthorized>
        <div class="main">
            <div class="content px-4">
                @Body
            </div>
        </div>
   </NotAuthorized>
</AuthorizeView>

测试上面的代码，看看它是否满足你的期望，然后相应地为你建模。请注意，您的 Login 组件应使用该@layout指令进行修饰，以便 Blazor 将在您的自定义布局中显示 Login 组件。

在 DEFAULT MainLayout 之后为您的自定义布局建模...删除不必要的部分，并根据需要添加您自己的部分。

这：@inherits LayoutComponentBase

还有这个：

   <div class="main">
                <div class="content px-4">
                    @Body
                </div>
   </div>

是必须的.​​..

推荐阅读