在 Blazor WASM 中更改授权布局

Question

我有一个 Blazor WASM 应用程序。它授权将 Auth0 Azure 与本地数据库混合使用。

如何更改 app.razor 授权部分以使用与路由器其余部分不同的布局？

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

我不想在授权时看到主布局，并希望使用与 index.html 类似的布局，它只是一个带有加载轮的程式化徽标

目前它在主布局的@body 中有授权文本

Answer 1

在您的 Shared 文件夹中创建一个新布局，假设 LoginLayout 并更改您的 App.razor 以引用新布局，如下所示：

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

日志布局应包括此行：@inherits LayoutComponentBase

然后在您的 LoginLayout 中，您可以引用登录组件，即 <LoginComponent />，如下所示：

@inherits LayoutComponentBase
@inject NavigationManager _navigationManager

<SpinnerComponent></SpinnerComponent>
<div class="wrapper">
    <nav class="main-header navbar navbar-expand navbar-white navbar-light">
        <ul class="navbar-nav">
            <li class="nav-item">
                <a href="/login" class="navbar-brand padding-0">
                    <img src="images/logo.svg" alt="company logo" id="leftMenuLogo">
                </a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto">
            <LoginComponent />
        </ul>
    </nav>
    <div class="content-wrapper">
        <div class="container-fluid d-flex flex-column container-fluid-max" style="">
            @Body
        </div>
    </div>
    <FooterComponent />
</div>

（可选）如果您希望用户通过导航管理器轻松重定向到它，则可以在 <LoginComponent /> 中添加一个页面指令，即 _navigationManager.NavigateTo("/login");

最后，当用户完成身份验证时，您将他们重定向到索引，即 _navigationManager.NavigateTo("/");。

在索引页中，您应该添加一个 @page "/" 和一个 @layout MainLayout。如果您需要更多代码，请告诉我您想要什么，我会 post.

在 Blazor WASM 中更改授权布局

changing authorization layoutt in Blazor WASM

layout

razor

blazor

blazor-webassembly