如何为未认证用户可访问页面配置不同的MainLayout继承？

步骤1：提取公共基础布局（复用通用组件与样式） #

创建BaseLayout.razor，把所有页面都需要的MudBlazor核心服务、主题、RTL配置抽离出来，避免重复代码：

<MudRTLProvider RightToLeft="@LayoutService.IsRTL">
    <MudDialogProvider/>
    <MudSnackbarProvider/>
    <MudThemeProvider @ref="@_mudThemeProvider" 
                     Theme="@LayoutService.CurrentTheme" 
                     IsDarkMode="@LayoutService.IsDarkMode" 
                     IsDarkModeChanged="@LayoutService.SetDarkMode"/>
    
    @Body
</MudRTLProvider>

@code {
    [Inject] protected LayoutService LayoutService { get; set; }
    private MudThemeProvider _mudThemeProvider;
}

步骤2：创建认证用户专用布局 #

创建AuthenticatedLayout.razor，继承BaseLayout，包含原MainLayout中认证用户可见的导航、头部等组件：

@inherits BaseLayout

<MudLayout>
    <HeaderMenu NavigationMenuDrawerOpen="_navigationMenuDrawerOpen"
                OpenSearchDialog="OpenSearchDialog"
                IsDarkMode="@LayoutService.IsDarkMode"
                ToggleNavigationMenuDrawer="ToggleNavigationMenuDrawer"
                RightToLeft="@LayoutService.IsRTL"
                RightToLeftToggle="LayoutService.ToggleRightToLeft"
                OnSettingClick="@(() => _themingDrawerOpen = true)"/>
    <NavigationMenu DrawerOpen="_navigationMenuDrawerOpen"
                    DrawerOpenChanged="NavigationMenuDrawerOpenChangedHandler"/>
    <ThemesMenu ThemingDrawerOpen="_themingDrawerOpen"
                ThemingDrawerOpenChanged="ThemingDrawerOpenChangedHandler"
                UserPreferences="_userPreferences"
                UserPreferencesChanged="LayoutService.UpdateUserPreferences"/>
    <ThemesButton OnClick="@(() => _themingDrawerOpen = true)"/>
    <MudMainContent>
        <MudContainer MaxWidth="MaxWidth.ExtraLarge" Class="mb-4 mt-4">
            <ErrorBoundary @ref="_errorBoundary">
                <ChildContent>
                    @Body
                </ChildContent>
                <ErrorContent Context="exception">
                    <CustomError Exception="exception"></CustomError>
                </ErrorContent>
            </ErrorBoundary>
        </MudContainer>
    </MudMainContent>
    <UserLoginState/>
</MudLayout>

@code {
    private bool _navigationMenuDrawerOpen;
    private bool _themingDrawerOpen;
    private ErrorBoundary _errorBoundary;
    private UserPreferences _userPreferences;

    private void ToggleNavigationMenuDrawer()
    {
        _navigationMenuDrawerOpen = !_navigationMenuDrawerOpen;
    }

    private void NavigationMenuDrawerOpenChangedHandler(bool value)
    {
        _navigationMenuDrawerOpen = value;
    }

    private void ThemingDrawerOpenChangedHandler(bool value)
    {
        _themingDrawerOpen = value;
    }

    private void OpenSearchDialog()
    {
        // 保留原搜索弹窗逻辑
    }
}

步骤3：创建匿名用户专用布局 #

创建AnonymousLayout.razor，继承BaseLayout，包含原MainLayout中匿名用户可见的登录提示等内容：

@inherits BaseLayout

<MudLayout>
    <MudContainer MaxWidth="MaxWidth.Small" Class="d-flex align-center" Style="height: 100vh;">
        <div class="d-flex flex-column mud-width-full">
            <MudPaper Elevation="25" Class="pa-8" Width="100%" MaxWidth="500px">
                <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Size="Size.Large" Style="width:100px; height:100px;"/>
                @Body
            </MudPaper>
            <MudAlert Severity="Severity.Info" Class="mt-8 mud-width-full" Style="max-width:500px;">
                @L["authentication is required, click"] <MudLink Href="/"> @L["sign in"]</MudLink>
            </MudAlert>
        </div>
    </MudContainer>
</MudLayout>

@code {
    [Inject] protected IStringLocalizer<SharedResource> L { get; set; }
}

步骤4：为页面指定对应布局 #

• 需要认证的页面：在页面顶部添加@layout AuthenticatedLayout
• 无需认证的页面：在页面顶部添加@layout AnonymousLayout

示例：

@page "/dashboard"
@layout AuthenticatedLayout

<h1>Dashboard</h1>
<!-- 页面内容 -->

@page "/public/about"
@layout AnonymousLayout

<h1>About Us</h1>
<!-- 公开页面内容 -->

步骤5：全局默认布局配置（可选） #

如果大部分页面需要认证，可在_Imports.razor中设置全局默认布局：

@layout AuthenticatedLayout

这样仅少数公开页面需手动指定@layout AnonymousLayout即可。

原MainLayout的处理 #

可直接删除原MainLayout.razor，或改为其中一个布局的别名，避免路由引用报错。

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