在纯 HTML 登录页面上预加载 Blazor WASM 程序集

使用基本 HTML 登录页面预加载 Blazor WASM 程序集

该解决方案使用模块化方法，前端使用 JavaScript，后端使用 .NET API，以异步预加载程序集并安全地管理身份验证。

// Front-End: HTML + JavaScript solution for preloading Blazor WASM assemblies
document.addEventListener("DOMContentLoaded", async () => {
  // Step 1: Define the Blazor assemblies URL
  const wasmBasePath = "/_framework/blazor.boot.json";
  const preloadAssemblies = async () => {
    try {
      const response = await fetch(wasmBasePath);
      if (response.ok) {
        const data = await response.json();
        const assemblyPromises = data.resources.assembly.map((asm) => fetch(asm));
        await Promise.all(assemblyPromises);
        console.log("Blazor assemblies preloaded successfully.");
      }
    } catch (error) {
      console.error("Failed to preload Blazor assemblies:", error);
    }
  };
  preloadAssemblies();
});
// Login button handler
document.getElementById("login-btn").addEventListener("click", async () => {
  const username = document.getElementById("username").value;
  const password = document.getElementById("password").value;
  try {
    const response = await fetch("/api/authenticate", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ username, password })
    });
    if (response.ok) {
      const token = await response.json();
      localStorage.setItem("jwtToken", token);
      console.log("Authentication successful.");
      // Optionally, trigger Blazor WASM now
      if (typeof Blazor !== "undefined") Blazor.start();
    } else {
      alert("Invalid credentials.");
    }
  } catch (error) {
    console.error("Error during login:", error);
  }
});

.NET 中的后端身份验证 API

此脚本在 ASP.NET Core 中实现了一个简单的身份验证 API，旨在验证凭据并返回 JSON Web 令牌 (JWT)。

using Microsoft.AspNetCore.Mvc;
using Microsoft.IdentityModel.Tokens;
using System.IdentityModel.Tokens.Jwt;
using System.Security.Claims;
using System.Text;
[ApiController]
[Route("api/[controller]")]
public class AuthenticateController : ControllerBase
{
    private readonly string key = "Your_Secret_Key_Here";

    [HttpPost]
    public IActionResult Authenticate([FromBody] LoginRequest request)
    {
        if (request.Username == "user" && request.Password == "password")
        {
            var tokenHandler = new JwtSecurityTokenHandler();
            var tokenKey = Encoding.ASCII.GetBytes(key);
            var tokenDescriptor = new SecurityTokenDescriptor
            {
                Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, request.Username) }),
                Expires = DateTime.UtcNow.AddHours(1),
                SigningCredentials = new SigningCredentials(new SymmetricSecurityKey(tokenKey), SecurityAlgorithms.HmacSha256Signature)
            };
            var token = tokenHandler.CreateToken(tokenDescriptor);
            return Ok(tokenHandler.WriteToken(token));
        }
        return Unauthorized();
    }
}
public class LoginRequest
{
    public string Username { get; set; }
    public string Password { get; set; }
}

有关预加载 Blazor WASM 程序集的常见问题

1. 如何确保程序集正确缓存？
2. 使用 Cache-Control 服务器上的标头来定义缓存规则。例如，设置 max-age 指定缓存持续时间。
3. 如何处理程序集的更新？
4. 在中包含版本哈希 blazor.boot.json URL 或程序集文件路径。这迫使浏览器获取更新的资源。
5. 我可以有条件地预加载程序集吗？
6. 是的，在预加载之前使用 JavaScript 检查条件。例如，检查用户的登录状态并调用 fetch 仅在必要时。
7. 如果预加载失败会发生什么？
8. 在脚本中包含错误处理。例如，将 fetch 逻辑在一个 try-catch 阻止优雅地处理网络问题。
9. 如何优化大型应用程序的预加载过程？
10. 将程序集分解为更小的、延迟加载的模块。使用 Blazor 的 dynamic assembly loading 仅加载必要的部分。

简化登录到 Blazor WASM 的过渡

将轻量级登录页面与预加载机制集成可显着提高 Blazor WASM 应用程序的性能。它确保用户享受快速响应时间，同时保持应用程序的安全和稳健。缓存和错误处理等技术可以最大限度地减少延迟或故障。 🌟

通过专注于程序集版本控制和通过加载指示器进行用户反馈等策略，开发人员可以提供完美的体验。这种方法可确保从登录到应用程序的无缝过渡，同时提高可靠性和用户满意度。