Blazor WASM无法从wwwroot加载静态HTML页面的授权跳转问题

我在Blazor WebAssembly项目的wwwroot目录下创建了自带JS和CSS的静态HTML页面Terms.html。首次在浏览器无痕模式访问https://baseURL/Terms.html可正常打开，但应用加载完成后再次访问该地址会跳转到登录页；即使移动静态文件位置也无效果，且该页面似乎渲染了MainLayout.razor。

项目相关代码 #

App.razor #

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <UnAuthorized />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

UnAuthorized.razor #

@inject NavigationManager NavigationManager

<MudGrid>
    <MudItem xs="12">
        <MudGrid>
            You are not authorized to access this page.
        </MudGrid>
    </MudItem>
</MudGrid>

@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated)
        {
            NavigationManager.NavigateTo("/login", true);
        }

        StateHasChanged();
    }
}

MainLayout.razor #

<AuthorizeView>
    <NotAuthorized>
        <UnAuthorized />
    </NotAuthorized>
</AuthorizeView>

已尝试的解决方案 #

1. 修改App.razor，判断URL以.html结尾时绕过授权，用StaticFileView组件（iframe加载）：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            @* Check if the requested URL ends with ".html" *@
            @if (ShouldBypassAuthorization(NavigationManager.Uri))
            {
                <StaticFileView PagePath="@NavigationManager.Uri"></StaticFileView>
            }
            else
            {
                <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                    <NotAuthorized>
                        <UnAuthorized />
                    </NotAuthorized>
                </AuthorizeRouteView>
            }
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

@code {
    [Inject]
    protected NavigationManager NavigationManager { get; set; }

    bool ShouldBypassAuthorization(string url)
    {
        return url != null && url.EndsWith(".html", StringComparison.OrdinalIgnoreCase);
    }
}

StaticHtmlPage.razor代码：

@code {
    [Parameter]
    public string PagePath { get; set; }
}

<iframe src="@PagePath" frameborder="0" style="width: 100%; height: 100vh;"></iframe>

2. 创建PublicLayout布局和新Razor组件，使用[AllowAnonymous]特性，通过HttpClient获取HTML内容渲染，但存在CSS和JS冲突问题：

@layout PublicLayout
@inject HttpClient HttpClient;
@page "/TermsTest"
@using System.IO

@inject IJSRuntime JSRuntime

@attribute [AllowAnonymous]
@if (!string.IsNullOrEmpty(htmlContent))
{
    <div @innerHTML="htmlContent"></div>
}

@((MarkupString)htmlContent)

@code{
    private string htmlContent;
    protected override async Task OnInitializedAsync()
    { 
        htmlContent = await HttpClient.GetStringAsync("Terms.html");
        Console.WriteLine(htmlContent);
    }
}

问题根源 #

Blazor应用加载完成后，客户端路由会接管所有导航请求。当访问/Terms.html时，Blazor Router无法匹配到对应的路由组件，进入<NotFound>块；而<NotFound>使用了MainLayout，其中的AuthorizeView检测到用户未授权，触发跳转登录。首次无痕访问正常是因为此时Blazor应用尚未加载，请求直接由服务器返回静态文件。

有效解决方法 #

方案1：拦截.html导航请求，强制服务器加载 #

修改App.razor，添加导航拦截逻辑，当检测到目标路径为.html结尾时，取消Blazor内部导航，强制浏览器向服务器请求静态文件：

@inject NavigationManager NavManager

<CascadingAuthenticationState>
    <!-- 拦截内部导航到.html的请求 -->
    <NavigationLock OnBeforeInternalNavigation="HandleBeforeNavigation" />
    
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <UnAuthorized />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <!-- 处理未匹配到路由的情况，若为.html文件则强制刷新 -->
            @if (NavManager.Uri.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
            {
                <p>加载静态内容中...</p>
                @{ NavManager.NavigateTo(NavManager.Uri, forceLoad: true); }
            }
            else
            {
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            }
        </NotFound>
    </Router>
</CascadingAuthenticationState>

@code {
    private void HandleBeforeNavigation(LocationChangingContext context)
    {
        // 检查目标路径是否为.html结尾
        if (context.TargetLocation.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
        {
            // 取消Blazor内部导航，改用服务器加载
            context.PreventNavigation();
            NavManager.NavigateTo(context.TargetLocation, forceLoad: true);
        }
    }
}

方案2：修改NotFound布局，绕过授权 #

如果不想强制刷新，可以修改NotFound块，当检测到.html路径时，不使用MainLayout，直接加载静态文件：

<CascadingAuthenticationState>
    <Router AppAssembly="@typeof(Program).Assembly">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <UnAuthorized />
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            @if (NavManager.Uri.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
            {
                <!-- 直接加载静态HTML，不使用需要授权的MainLayout -->
                <iframe src="@NavManager.Uri" frameborder="0" style="width: 100%; height: 100vh; border: none;"></iframe>
            }
            else
            {
                <LayoutView Layout="@typeof(MainLayout)">
                    <p>Sorry, there's nothing at this address.</p>
                </LayoutView>
            }
        </NotFound>
    </Router>
</CascadingAuthenticationState>

@code {
    [Inject]
    protected NavigationManager NavManager { get; set; }
}

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