要自定义Blazor登录页面，您可以按照以下步骤进行操作：

步骤1：创建自定义登录页面组件 在Blazor项目中，您可以创建一个自定义的登录页面组件，用于替代Blazor默认提供的登录页面。

@page "/login"
@inject AuthenticationStateProvider AuthenticationStateProvider

Login


    
    

    

        Username
        
    

    

        Password
        
    

    Login


@code {
    private LoginModel loginModel = new LoginModel();

    private async Task HandleLogin()
    {
        // Perform login logic here
        // Example:
        var result = await AuthenticationStateProvider.Login(loginModel.Username, loginModel.Password);
        if (result.Success)
        {
            // Redirect to home page
            NavigationManager.NavigateTo("/");
        }
        else
        {
            // Display error message
            // Example:
            loginModel.ErrorMessage = result.ErrorMessage;
        }
    }
}

步骤2：创建自定义登录逻辑 在上面的代码示例中，AuthenticationStateProvider是一个自定义的认证状态提供程序。您可以在该类中实现具体的登录逻辑。

public class AuthenticationStateProvider
{
    public async Task Login(string username, string password)
    {
        // Perform login logic here
        // Example:
        if (username == "admin" && password == "password")
        {
            // Login successful
            return new LoginResult { Success = true };
        }
        else
        {
            // Login failed
            return new LoginResult { Success = false, ErrorMessage = "Invalid username or password" };
        }
    }
}

public class LoginResult
{
    public bool Success { get; set; }
    public string ErrorMessage { get; set; }
}

步骤3：在Blazor应用程序中使用自定义登录页面 要使用自定义的登录页面，您需要在App.razor文件中将其添加为应用程序的路由之一。

    
        
            
                
            
            
                
Authorizing...
            
        
    
    
        
            
Sorry, there's nothing at this address.
        
    

上述代码中，组件被添加为应用程序的一个路由。当用户访问/login时，将显示自定义的登录页面。

这是一个基本的示例，您可以根据自己的需求进行修改和扩展。通过自定义登录页面，您可以实现Blazor应用程序的个性化登录体验。