Question

我有一个Blazor WASM，具有2种布局：

MainLayout
LoginLayout

我的主要Index文件具有“授权”属性

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

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

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

这意味着，由于Index是主要路线，并且使用MainLayout，因此验证和重定向到我的登录页面大约需要1秒钟，这就是布局问题的原因。

在页面上呈现MainLayout之前是否可以进行重定向？还是一种在用户未通过身份验证时不显示Layout HTML的方法？

Answer 1

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

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

在登录页面

    @layout EmptyLayout
     <div class="container">
       <EditForm class="login-form" Model="model" OnValidSubmit="LoginSubmit">
        
        ...

      <button type="submit" class="btn btn-primary">Войти</button>
      </EditForm>
    </div>

重定向到登录组件

    @inject NavigationManager navigationManager

    @code {
    protected override void OnInitialized()
    {
    navigationManager.NavigateTo("/system/login");
    }
 }

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>

Answer 2

尝试以下代码...我在通过个人身份验证托管的WebAssembly中对其进行了表面测试，似乎还不错。如果用户未通过身份验证，并且使用Authorize属性对Index组件进行了注释，则将其重定向到“登录”页面，而不会看到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>

必须的...

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

2 个答案: