如何让我的 Blazor Web 应用程序像在 InteractiveServer 中一样保存输入的登录信息，但仍然能够使用 HttpContext 进行登录？

Question

我正在尝试创建一个使用 cookie 的 Blazor 登录页面，但如果没有渲染模式 InteractiveServer，我在表单上输入的信息将不会被保存和发送。如果我打开它，SignalR 将使 HttpContext 为空。 我尝试在不导入和关闭渲染模式的情况下保留数据可用，它工作得很好。有人可以帮助我如何使渲染模式和 SignalR 使 HttpContext 不为空，或者是否有其他方法使用 Cookie 登录 SignalR？ 我怎样才能使网站正常运行？对不起，我的英语不好。这是我的 Login.razor：

@page "/Account/Login"

@using System.ComponentModel.DataAnnotations
@using DBDATA.Models
@using MUDTEMPLATE.Services
@using System.Security.Claims
@using Microsoft.AspNetCore.Authentication
@using Microsoft.AspNetCore.Authentication.Cookies

@inject INguoidungService nguoiDungService
@inject NavigationManager NavigationManager
@inject IHttpContextAccessor _httpContectAccessor

@rendermode InteractiveServer

<div class="row">
    <div class="col-lg-4 offset-lg-4 pt-4 pb border">
        <EditForm Model="@Model" OnValidSubmit="Auth" FormName="LoginForm">
            <DataAnnotationsValidator />
            <div class="mb-3 text-center flex-column">
                <h3>Login</h3>
            </div>
            <div class="mb-3">
                <label>User Name</label>
                <InputText @bind-Value="Model.Name" class="form-control" placeholder="Username"></InputText>
                <ValidationMessage For="() => Model.Name" />
            </div>
            <div class="mb-3">
                <label>User Name</label>
                <InputText @bind-Value="Model.Pass" class="form-control" placeholder="Password"></InputText>
                <ValidationMessage For="() => Model.Pass"/>
            </div>
            <div class = "mb-3 text-center">
                @if(!string.IsNullOrEmpty(errorMessage)){
                    <span class="text-danger">errorMessage</span>
                }  
            </div>
            <div class="mb-3 d-grid gap-2">
                <button type="submit" class="btn btn-primary">Login</button>
            </div>
        </EditForm>
    </div>
</div>

@code{
    public class LoginVM
    {
        [Required(ErrorMessage = "Name cannot null")]
        public string? Name { get; set; }// = "quyet";
        [Required(ErrorMessage = "Pass cannot null")]
        public string? Pass { get; set; }// = "123456";
    }

    public LoginVM Model = new();

    private string? errorMessage;

    [CascadingParameter]
    public HttpContent httpContent { get; set; }

    private async Task Auth()
    {
        var user = await userService.FindByInfo(Model.Name, Model.Pass);
        if (user is null)
        {
            errorMessage = "Wrong information";
            return;
        }
        var claims = new List<Claim>
        {
            new Claim(ClaimTypes.Name, user.Name),
            new Claim(ClaimTypes.Role, user.Role)
        };

        var identity = new ClaimsIdentity(claims, CookieAuthenticationDefaults.AuthenticationScheme);
        var principal = new ClaimsPrincipal(identity);
        await _httpContectAccessor.HttpContext.SignInAsync(principal);
        NavigationManager.NavigateTo("/");
    }
}

Answer 1

Editform 在 SSR 中工作。只需删除

@rendermode InteractiveServer

并将

"public LoginVM Model = new();"

替换为以下内容：

    [SupplyParameterFromForm]
    public LoginVM Model { get; set; }
    protected override void OnInitialized() => Model ??= new();

那么提交后“Model”就不会为空了。

参考：https://learn.microsoft.com/en-us/aspnet/core/blazor/forms/?view=aspnetcore-8.0#input-components-and-forms