Blazor 8中<Router>组件异常：授权与404页面失效求助

核心原因 #

Blazor 8的交互式WebAssembly模式下，路由与授权的处理逻辑和Blazor 7单WASM应用有本质区别：

1. 服务器端路由优先拦截：Server项目的Routes.razor默认会在服务器端先处理路由匹配与授权检查，直接返回401 HTTP错误而非进入客户端的<NotAuthorized>模板；不存在的URL也会被服务器端的NotFound页面拦截，无法触发Blazor的<NotFound>逻辑。
2. 渲染模式未明确指定：未配置RenderMode导致路由处理未切换到客户端交互式模式，客户端的授权状态与路由逻辑无法生效。
3. 程序集指向错误：AppAssembly指向Server项目的Program，而非客户端组件所在的Client项目程序集，导致路由无法正确识别客户端带[Authorize]特性的组件。

修复步骤 #

1. 修正Routes.razor结构与配置

将Server项目的Routes.razor调整为以下结构，确保路由在客户端交互式环境下运行，且认证状态正确传递：

<CascadingAuthenticationState>
    <Router 
        AppAssembly="@typeof(Client.Program).Assembly" 
        AdditionalAssemblies="new[] { typeof(Server.Program).Assembly }"
        RenderMode="RenderMode.WebAssemblyInteractive">
        
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    <h2>You are not authorized.</h2>
                    <h3>To log in click <a href="/Accounts/LogIn">here</a>.</h3>
                </NotAuthorized>
                <Authorizing>
                    <p>Loading...</p>
                </Authorizing>
            </AuthorizeRouteView>
        </Found>
        
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

关键调整点：

• AppAssembly指向Client项目的Program，确保路由扫描客户端组件
• 添加RenderMode="RenderMode.WebAssemblyInteractive"，强制路由与授权逻辑在客户端执行
• 将<CascadingAuthenticationState>移至最外层，确保认证状态全局可用

2. 配置服务器端路由Fallback

在Server项目的Program.cs中，修改Blazor组件映射配置，让所有未匹配的路由fallback到客户端入口页面，避免服务器端拦截NotFound请求：

app.MapRazorComponents<App>()
    .AddInteractiveWebAssemblyRenderMode()
    .AddAdditionalAssemblies(typeof(Client._Imports).Assembly)
    .FallbackToPage("/_Host"); // 或根据项目结构使用FallbackToFile("/index.html")

3. 调整授权检查逻辑

如果需要保留服务器端授权，需避免服务器直接返回401，改为由客户端处理授权状态：

• 允许Blazor路由匿名访问，让客户端的AuthorizeRouteView处理授权：

  app.MapRazorComponents<App>()
      .AddInteractiveWebAssemblyRenderMode()
      .AddAdditionalAssemblies(typeof(Client._Imports).Assembly)
      .AllowAnonymous() // 服务器不拦截授权，交由客户端处理
      .FallbackToPage("/_Host");
  

• 若需API请求的授权处理，可在Client项目中自定义AuthorizationMessageHandler捕获401并跳转登录页：

  public class CustomAuthHandler : AuthorizationMessageHandler
  {
      public CustomAuthHandler(IAccessTokenProvider provider, NavigationManager navManager) 
          : base(provider, navManager)
      {
          ConfigureHandler(authorizedUrls: new[] { builder.HostEnvironment.BaseAddress });
      }
  
      protected override async Task HandleChallengeAsync(MessageReceivedContext context)
      {
          NavigationManager.NavigateTo("/Accounts/LogIn");
          await Task.CompletedTask;
      }
  }
  

  然后在Client项目的Program.cs中注册：

  builder.Services.AddHttpClient("API", client => client.BaseAddress = new Uri(builder.HostEnvironment.BaseAddress))
      .AddHttpMessageHandler<CustomAuthHandler>();
  builder.Services.AddScoped<CustomAuthHandler>();
  

4. 确认组件位置

确保MainLayout等布局组件存在于Client项目中，或Server项目可正确引用，因为交互式WebAssembly模式下组件会在客户端渲染。

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