如何在Blazor Server中为FAQ组件动态切换布局

一、先修复MainLayout的拦截逻辑 #

原MainLayout会在非认证时直接跳转登录页，导致未登录用户无法访问FAQ，需修改OnInitializedAsync方法，排除FAQ路由：

[CascadingParameter]
public Task<AuthenticationState> AuthenticationState { get; set; }
[Inject]
private NavigationManager NavigationManager { get; set; }

protected async override Task OnInitializedAsync()
{
    await base.OnInitializedAsync();

    var authState = await AuthenticationState;
    if (!authState.User.Identity.IsAuthenticated)
    {
        // 排除FAQ页面路由（假设FAQ路由为"/faq"）
        var currentPath = NavigationManager.Uri.Replace(NavigationManager.BaseUri, "/");
        if (!currentPath.Equals("/faq", StringComparison.OrdinalIgnoreCase))
        {
            // 仅非FAQ页面跳转登录
            NavigationManager.NavigateTo("/login");
        }
    }
    else
    {
        // 已认证用户的业务逻辑
    }
}

二、为FAQ组件添加匿名访问权限 #

在FAQ组件代码头部添加[AllowAnonymous]特性，确保路由允许未认证用户访问：

@page "/faq"
@attribute [AllowAnonymous]
@inject AuthenticationStateProvider AuthStateProvider

三、动态切换布局的两种实现方式 #

方式一：组件内部通过LayoutView动态选择布局 #

在FAQ组件内获取认证状态，根据状态渲染对应布局及内容：

@page "/faq"
@attribute [AllowAnonymous]
@inject AuthenticationStateProvider AuthStateProvider
@using YourProjectNamespace.Layouts; <!-- 替换为你的布局所在命名空间 -->

@code {
    private bool IsAuthenticated { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authState = await AuthStateProvider.GetAuthenticationStateAsync();
        IsAuthenticated = authState.User.Identity.IsAuthenticated;
    }
}

@if (IsAuthenticated)
{
    <LayoutView Layout="@typeof(MainLayout)">
        <h1>FAQ（已登录）</h1>
        <p>专属功能：查看历史咨询记录</p>
        <!-- 其他已认证用户可见的内容/功能 -->
    </LayoutView>
}
else
{
    <LayoutView Layout="@typeof(TempLayout)">
        <h1>FAQ（未登录）</h1>
        <p>登录后可查看更多专属功能</p>
        <!-- 其他未认证用户可见的内容 -->
    </LayoutView>
}

方式二：路由层面自定义布局逻辑 #

修改App.razor，通过路由数据和认证状态动态指定布局：

@inject AuthenticationStateProvider AuthenticationStateProvider

<CascadingAuthenticationState>
<Router AppAssembly="@typeof(App).Assembly">
    <Found Context="routeData">
        @{
            var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
            var isAuthenticated = authState.User.Identity.IsAuthenticated;
            // 判断当前路由是否为FAQ页面
            var isFaqRoute = routeData.PageType.Name.Equals("FAQ", StringComparison.OrdinalIgnoreCase);
            
            Type targetLayout = typeof(MainLayout);
            if (isFaqRoute && !isAuthenticated)
            {
                targetLayout = typeof(TempLayout);
            }
        }
        <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@targetLayout">
            <NotAuthorized>
                <LayoutView Layout="@typeof(TempLayout)">
                    <p>您无权限访问此页面，请登录</p>
                </LayoutView>
            </NotAuthorized>
        </AuthorizeRouteView>
        <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>

四、FAQ组件内功能区分 #

通过认证状态判断，为不同用户展示差异化功能：

@if (IsAuthenticated)
{
    <button @onclick="ViewMyTickets">查看我的咨询工单</button>
}
else
{
    <a href="/login">登录后解锁更多功能</a>
}

@code {
    private async Task ViewMyTickets()
    {
        // 已认证用户专属功能逻辑
    }
}

内容的提问来源于stack exchange，提问作者Code Rider