Blazor WASM在未经身份验证时重定向到登录-Don'；t显示布局

我有一个

Blazor WASM

有两个布局：

主布局

登录布局

我的主

索引

文件具有授权属性

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

当它的未授权被重定向到“auth/login”时，它使用不同的布局（

LoginLayout

），其中我有一个简单的登录页面

我面临的问题是，当我访问应用程序时，我可以看到一秒钟的

MainLayout

（页眉、导航左菜单、页脚），然后我看到登录时的空白屏幕

这意味着，由于

索引

是主路径，并使用

主布局

，因此验证并重定向到我的登录页面大约需要1秒，这就是布局问题的原因

在页面中呈现

MainLayout

之前，是否有方法进行重定向？或者，如果用户未经身份验证，则不显示布局HTML的方法

---

请尝试以下代码。。。我在带有个人身份验证的WebAssembly中对其进行了表面测试，结果似乎不错。如果用户没有经过身份验证，并且索引组件带有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> 

---

是必须的…

请尝试以下代码。。。我在带有个人身份验证的WebAssembly中对其进行了表面测试，结果似乎不错。如果用户没有经过身份验证，并且索引组件带有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> 

---

是必须的…

您可以创建另一个空布局并使用它

    @inherits LayoutComponentBase
    <div>
       @Body
     </div>

App.razor

    <Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
        <NotAuthorized>
            <RedirectToLogin />
        </NotAuthorized>
    </AuthorizeRouteView>
</Found>
<NotFound>
    <CascadingAuthenticationState>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </CascadingAuthenticationState>
</NotFound>

对不起，这个地址什么也没有

您可以创建另一个空布局并使用它

    @inherits LayoutComponentBase
    <div>
       @Body
     </div>

App.razor

    <Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
        <NotAuthorized>
            <RedirectToLogin />
        </NotAuthorized>
    </AuthorizeRouteView>
</Found>
<NotFound>
    <CascadingAuthenticationState>
        <LayoutView Layout="@typeof(MainLayout)">
            <p>Sorry, there's nothing at this address.</p>
        </LayoutView>
    </CascadingAuthenticationState>
</NotFound>

对不起，这个地址什么也没有