Blazor WASM授权登录如何避免应用双重加载问题

问题根因 #

你当前实现的双加载问题，本质是鉴权跳转逻辑触发时机太晚：逻辑放在App.razor的AuthorizeRouteView的NotAuthorized区块时，.NET WASM运行时、应用程序集已经完成下载初始化，组件树已经完成首次渲染才触发跳转，等于白跑了一遍完整的应用启动流程；登录完成回跳时浏览器重新加载页面，又要重复走一遍WASM下载、初始化、渲染流程，自然会拖慢速度。

最优方案：服务端前置拦截鉴权（彻底消除双加载） #

这是体验最好的方案，核心逻辑是未登录用户根本拿不到WASM应用资源，在ASP.NET Host服务端就直接触发登录跳转，登录回跳后才第一次加载WASM应用，完全不存在重复加载的问题。

• 修改Host（Server端）项目的Program.cs，在静态资源中间件、Blazor框架文件中间件之前加鉴权判断，跳过Identity Server认证相关端点避免死循环：

  // 先注册认证授权服务
  builder.Services.AddAuthentication(options =>
      {
          options.DefaultScheme = CookieAuthenticationDefaults.AuthenticationScheme;
          options.DefaultChallengeScheme = OpenIdConnectDefaults.AuthenticationScheme;
      })
      .AddCookie()
      .AddOpenIdConnect(OpenIdConnectDefaults.AuthenticationScheme, options =>
      {
          // 你原有Identity Server配置
          builder.Configuration.Bind("Oidc", options);
      });
  builder.Services.AddAuthorization();
  
  var app = builder.Build();
  
  // 非认证相关路径才做鉴权拦截
  app.UseWhen(context => 
      !context.Request.Path.StartsWithSegments("/authentication")
      && !context.Request.Path.StartsWithSegments("/signin-oidc")
      && !context.Request.Path.StartsWithSegments("/signout-callback-oidc"),
      appBuilder =>
      {
          appBuilder.UseAuthentication();
          appBuilder.UseAuthorization();
          appBuilder.Use(async (context, next) =>
          {
              if (!context.User.Identity?.IsAuthenticated ?? true)
              {
                  // 未登录直接触发OIDC挑战跳转到Identity Server，不往下返回WASM资源
                  await context.ChallengeAsync();
                  return;
              }
              await next();
          });
      });
  
  app.UseBlazorFrameworkFiles();
  app.UseStaticFiles();
  // 给WASM兜底路由加授权要求
  app.MapFallbackToFile("index.html").RequireAuthorization();
  

• 注意事项：务必将登录回调、登出回调、Blazor认证相关的静态资源路径加入白名单，否则会出现跳转死循环。

次优方案：WASM启动前前置鉴权（减少无效渲染） #

如果不想在服务端做全局拦截，可以把鉴权逻辑从App.razor提前到WASM启动流程的最早期，在根组件渲染之前就判断登录态，避免无效的组件渲染开销，比原方案体验好，但无法避免首次未登录时下载WASM资源的开销：

• 修改WASM项目的Program.cs，在注册根组件、启动应用之前完成鉴权判断：

  var builder = WebAssemblyHostBuilder.CreateDefault(args);
  // 原有服务注册
  builder.Services.AddOidcAuthentication(options =>
  {
      builder.Configuration.Bind("Oidc", options.ProviderOptions);
  });
  
  var host = builder.Build();
  
  // 渲染前先判断登录态
  var authStateProvider = host.Services.GetRequiredService<AuthenticationStateProvider>();
  var authState = await authStateProvider.GetAuthenticationStateAsync();
  if (authState.User.Identity?.IsAuthenticated != true)
  {
      var navManager = host.Services.GetRequiredService<NavigationManager>();
      // 未登录直接跳登录，终止后续组件渲染流程
      navManager.NavigateToLogin("authentication/login");
      return;
  }
  
  // 仅登录状态下才注册根组件、启动应用
  builder.RootComponents.Add<App>("#app");
  builder.RootComponents.Add<HeadOutlet>("head::after");
  await host.RunAsync();
  

原方案的额外问题 #

把跳转逻辑写在NotAuthorized区块还有个隐藏问题：如果后续要开放部分匿名访问页面，全局放在这里的跳转逻辑会误拦截匿名页面，鉴权粒度不好控制。

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