在纯 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; }
}

1. 有关 Blazor WebAssembly 设置和资源预加载的详细信息可以在 Microsoft 官方文档中找到： 微软 Blazor 文档 。
2. 有关将 JavaScript 与 Blazor 结合使用以增强功能的见解，请访问： Blazor JavaScript 互操作性 。
3. 要了解缓存策略和优化 WebAssembly 应用程序性能，请访问： Web.dev 缓存最佳实践 。
4. 可以在此处访问在 ASP.NET Core 中实现 JWT 身份验证的实用指南： ASP.NET Core JWT 身份验证 。
5. 有关 Blazor WASM 的社区讨论和故障排除，请参阅 Stack Overflow 线程： Stack Overflow 上的 Blazor 标签 。