英文:
How to set MainLayout conditionally for a component in Blazor Server
问题
在我的Blazor Server项目中，我有一个MainLayout.razor组件，它是整个应用程序的主要布局。在这个MainLayout的OnInitialized事件中，我正在检查身份验证状态，只有已经通过身份验证的用户才能访问进一步的组件。
有一个FAQ组件，它应该可以由已经通过身份验证和未通过身份验证的用户访问。对于这两种用户，某些功能会有所不同。
我创建了另一个不需要身份验证的布局组件。
现在我卡在如何根据已通过身份验证和未通过身份验证的用户动态设置FAQ组件的布局。
App.razor
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
MainLayout.razor
[CascadingParameter]
public Task<AuthenticationState> AuthenticationState { get; set; }
protected async override Task OnInitializedAsync()
{
await base.OnInitializedAsync();
var authState = await AuthenticationState;
if (authState.User.Identity.IsAuthenticated)
{
// 登录后的某些功能
}
else
{
// 导航到登录界面
}
}
TempLayout.razor（此组件用于未经身份验证的用户）
@inherits LayoutComponentBase
<!-- 开始：内容 -->
<div class="app-content container center-layout mt-2">
<div class="content-overlay"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
@Body
</div>
</div>
<!-- 结束：内容 -->
这些是您提供的代码的翻译部分。
英文:
In my Blazor Server project, I have a MainLayout.razor component which is a master layout for the whole application. On this MainLayout's OnInitialized event I'm checking the authentication state and only authenticated users can access the further components.
There is a FAQ component which should be accessible by authenticated and non-authenticated users as well. For both of such users, some functionality would be different.
I have created another Layout Component which doesn't need authentication.
Now I'm stuck at the point that how I can dynamically set the layout of the FAQ component according to authenticated and non-authenticated users.
App.razor
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
<Found Context="routeData">
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
<NotFound>
<PageTitle>Not found</PageTitle>
<LayoutView Layout="@typeof(MainLayout)">
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState>
MainLayout.razor
[CascadingParameter]
public Task<AuthenticationState> AuthenticationState { get; set; }
protected async override Task OnInitializedAsync()
{
await base.OnInitializedAsync();
var authState = await AuthenticationState;
if (authState.User.Identity.IsAuthenticated)
{
//Some functionality after login
}
else
{
//Navigate to the Login screen
}
}
TempLayout.razor (this component to be used for non-authenticated users)
@inherits LayoutComponentBase
<!--Start: Content-->
<div class="app-content container center-layout mt-2">
<div class="content-overlay"></div>
<div class="content-wrapper">
<div class="content-header row">
</div>
@Body
</div>
</div>
<!--End: Content-->
答案1
得分: 1
制作两个组件：一个用于已验证用户，另一个用于未验证用户。为每个组件设置不同的布局。
英文:
Make two components; one for authenticated and other for un-authenticated users. Set different layout for each
答案2
得分: 0
你可以将 app.razor 包装在 authorizeView 中。这样，你可以根据当前的授权状态聚合到正确的布局中。
或者
你只使用一个 layout.razor 并创建一些条件性的 cshtml 来显示正确的布局。
正如 @ruikai_feng 提到的，这个链接可能对你有帮助：https://github.com/dotnet/aspnetcore/issues/39456。
英文:
You could wrap the app.razor in a authorizeView. This way you can aggregate to the correct layout depending on which autorization state you currently have.
OR
you use only one layout.razor and you make some conditional cshtml to show the correct layout.
As @ruikai_feng mentioned this might help you https://github.com/dotnet/aspnetcore/issues/39456
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论