如何修改Blazor WASM授权中页面使用独立于路由的自定义布局

步骤1：创建独立的授权中布局组件 #

在项目Shared目录下新建AuthorizingLayout.razor文件，自定义仅包含logo、加载动画的极简布局：

@inherits LayoutComponentBase

<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .auth-loading-container {
        width: 100vw;
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: #fff; /* 可自定义为你的品牌背景色 */
    }
    .brand-logo {
        width: 140px;
        margin-bottom: 32px;
    }
    .loading-spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f0f0f0;
        border-top: 4px solid #1890ff; /* 可自定义为你的品牌主色 */
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin-bottom: 16px;
    }
    @@keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .auth-tip {
        color: #666;
        font-size: 14px;
    }
</style>

<div class="auth-loading-container">
    <img src="你的logo路径" alt="品牌logo" class="brand-logo">
    <div class="loading-spinner"></div>
    @Body <!-- 渲染App.razor中Authorizing片段传入的内容 -->
</div>

你也可以根据需求调整布局样式，或者直接把所有授权中UI都写在这个布局文件里，不需要通过@Body传内容。

步骤2：修改App.razor配置 #

将原有<Authorizing>片段的内容嵌套在<LayoutView>中，指定使用你新建的独立布局，修改后的完整代码如下：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <Authorizing>
                    <!-- 手动指定独立布局，覆盖默认的MainLayout继承 -->
                    <LayoutView Layout="@typeof(AuthorizingLayout)">
                        <!-- 这里的内容会渲染到AuthorizingLayout的@Body区域，也可以留空 -->
                        <p class="auth-tip">正在授权中，请稍候...</p>
                    </LayoutView>
                </Authorizing> 
                <NotAuthorized>
                    <RedirectToLogin />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

实现逻辑说明 #

原有配置中<Authorizing>片段默认会继承<AuthorizeRouteView>设置的DefaultLayout，因此内容会渲染在MainLayout的@Body区域。通过手动嵌套<LayoutView>指定布局，会覆盖默认的布局继承规则，授权中状态会完全使用你自定义的独立布局渲染，不会加载MainLayout的任何内容。

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