Blazor PWA应用中验证登录ID是否存在于硬编码用户列表的实现咨询

嘿，我看你是想在Blazor PWA里实现这么个登录逻辑：用户输入一个ID（这个ID相当于登录凭证，和用户真实的userId是两个不同字段），然后检查这个ID是不是已经在你的硬编码用户列表里注册过，对吧？我先理清楚你的核心需求，再看看现有代码里的问题，给你调整下实现方案。

先明确你的核心需求 #

• 从localStorage中获取用户输入的登录ID（用作登录凭证的那个Id）
• 检查该ID是否存在于你的硬编码users列表（或者从IuserService获取的用户列表）中
• 如果ID未注册，提示错误；如果已注册，完成登录流程并跳转页面

现有代码里的问题 #

1. 逻辑方向搞反了：你现在的代码是在生成新ID，而不是验证用户输入的ID是否存在，完全不符合你的需求
2. 没有从localStorage读取用户输入的登录ID，反而在自己生成id值，这和你要做的“验证已注册ID”不沾边
3. 错误处理不完整：比如errorMessage = true后没有阻止后续的导航操作，会导致不管验证成功与否都跳转到验证页面

修正后的实现代码 #

首先，先确保你的硬编码用户列表有初始化的测试数据，然后调整HandleLogin方法的逻辑：

private DataModel data = new DataModel();

public class DataModel
{
    public int Id { get; set; } // 用作登录凭证的ID（类似密码）
    public string UserId { get; set; } // 用户真实的唯一ID
    public string SMSCode { get; set; }
    public string Token { get; set; }
}

// 硬编码的用户列表，这里可以初始化一些已注册的用户
private List<DataModel> users = new List<DataModel>();

// 页面初始化时填充硬编码用户
protected override void OnInitialized()
{
    // 添加几个测试用的已注册用户
    users.Add(new DataModel { Id = 1001, UserId = Guid.NewGuid().ToString(), SMSCode = "1234", Token = "user-token-1001" });
    users.Add(new DataModel { Id = 1002, UserId = Guid.NewGuid().ToString(), SMSCode = "5678", Token = "user-token-1002" });
}

private async void HandleLogin()
{
    Console.WriteLine("Log me in!");
    
    // 第一步：从localStorage获取用户输入的登录ID（假设用户输入后存在了"loginId"这个键下）
    if (!await LocalStorage.ContainKeyAsync<int>("loginId"))
    {
        errorMessage = true;
        errorText = "请先输入登录ID";
        return; // 阻止后续流程
    }
    int inputLoginId = await LocalStorage.GetItemAsync<int>("loginId");

    // 第二步：检查这个ID是否在已注册用户列表中
    // 如果你是从服务获取用户列表，就替换成下面的注释代码
    bool isIdRegistered = users.Any(user => user.Id == inputLoginId);
    // var userslist = await IuserService.getUsers();
    // bool isIdRegistered = userslist.Any(user => user.Id == inputLoginId);

    if (!isIdRegistered)
    {
        // ID未注册，提示错误
        errorMessage = true;
        errorText = "该ID未注册，请检查输入";
        return; // 阻止后续流程
    }

    // 第三步：ID验证通过，执行登录后的逻辑
    // 获取匹配的用户信息（如果需要用到用户的其他数据）
    var matchedUser = users.First(user => user.Id == inputLoginId);
    // var matchedUser = userslist.First(user => user.Id == inputLoginId);

    // 保存用户真实的userId到localStorage（后续可以用来识别用户）
    await LocalStorage.SetItemAsync<string>("userId", matchedUser.UserId);
    // 如果有Token的话也可以保存
    if (!string.IsNullOrEmpty(matchedUser.Token))
    {
        await LocalStorage.SetItemAsync<string>("token", matchedUser.Token);
    }

    // 更新认证状态并跳转到验证页面
    await AuthStateProvider.GetAuthenticationStateAsync();
    NavManager.NavigateTo("/verificar");
}

额外注意事项 #

• 确保用户在登录输入框输入ID后，已经把这个值保存到localStorage的loginId键下，比如在输入框的绑定值变化时执行await LocalStorage.SetItemAsync<int>("loginId", inputId);
• 页面上要绑定errorMessage和errorText变量，用来显示错误提示，比如：

@if (errorMessage)
{
    <div class="alert alert-danger">@errorText</div>
}

• 如果是从服务获取用户列表，记得添加异常处理（比如try-catch块），避免服务调用失败导致程序崩溃

备注：内容来源于stack exchange，提问作者DimitriTfb