在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。如果你想要更多的代码，请让我知道你到底想要什么，我会张贴。