Blazor WASM 在未通过身份验证时重定向到登录 - 不显示布局
Blazor WASM redirect to login when not authenticated - Don't show layout
我有一个 Blazor WASM
有 2 种布局:
- 主布局
- 登录布局
我的主要 Index
文件具有授权属性
@page "/"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]
当未授权被重定向到使用不同布局 (LoginLayout
) 的“auth/login”时,我有一个简单的登录页面。
我面临的问题是,当我访问该应用程序时,我可以看到一秒钟 MainLayout
(页眉、导航左侧菜单、页脚),然后我看到我的登录空白屏幕。
这意味着因为 Index
是主路由并使用 MainLayout
,验证和重定向到我的登录页面大约需要 1 秒,这就是布局问题的原因。
Is there a way to do the redirect before the MainLayout
is rendered in the page? Or a way to not show the Layout HTML if the user is not authenticated?
试试下面的代码...我在使用个人身份验证托管的 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>
测试上面的代码,看看它是否满足您的期望,然后相应地为您建模。请注意,您的登录组件应使用 @layout
指令进行修饰,以便 Blazor 将在您的自定义布局中显示登录组件。
在 DEFAULT MainLayout 之后为您的自定义布局建模...删除不需要的部分,然后根据需要添加您自己的部分。
这个:@inherits LayoutComponentBase
还有这个:
<div class="main">
<div class="content px-4">
@Body
</div>
</div>
必须...
您可以创建另一个空布局并使用它
@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>
您可以移除
DefaultLayout="@typeof(MainLayout)
来自 App.razor 文件中的 AuthorizeRouteView 标记:
App.razor:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" >
<NotAuthorized>
<RedirectToLogin />
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>
,但你必须把
@layout MainLayout
在所有授权页面
我有一个 Blazor WASM
有 2 种布局:
- 主布局
- 登录布局
我的主要 Index
文件具有授权属性
@page "/"
@using Microsoft.AspNetCore.Authorization
@using Microsoft.AspNetCore.Components.WebAssembly.Authentication
@attribute [Authorize]
当未授权被重定向到使用不同布局 (LoginLayout
) 的“auth/login”时,我有一个简单的登录页面。
我面临的问题是,当我访问该应用程序时,我可以看到一秒钟 MainLayout
(页眉、导航左侧菜单、页脚),然后我看到我的登录空白屏幕。
这意味着因为 Index
是主路由并使用 MainLayout
,验证和重定向到我的登录页面大约需要 1 秒,这就是布局问题的原因。
Is there a way to do the redirect before the
MainLayout
is rendered in the page? Or a way to not show the Layout HTML if the user is not authenticated?
试试下面的代码...我在使用个人身份验证托管的 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>
测试上面的代码,看看它是否满足您的期望,然后相应地为您建模。请注意,您的登录组件应使用 @layout
指令进行修饰,以便 Blazor 将在您的自定义布局中显示登录组件。
在 DEFAULT MainLayout 之后为您的自定义布局建模...删除不需要的部分,然后根据需要添加您自己的部分。
这个:@inherits LayoutComponentBase
还有这个:
<div class="main">
<div class="content px-4">
@Body
</div>
</div>
必须...
您可以创建另一个空布局并使用它
@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>
您可以移除
DefaultLayout="@typeof(MainLayout)
来自 App.razor 文件中的 AuthorizeRouteView 标记:
App.razor:
<Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" >
<NotAuthorized>
<RedirectToLogin />
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<CascadingAuthenticationState>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</CascadingAuthenticationState>
</NotFound>
</Router>
,但你必须把
@layout MainLayout
在所有授权页面