想在bootStrapblazor中实现用户登录，发现这一块坑是真多，分享一下

遇到的问题

1、.net8.0和以前的验证方式在写法上有些不一样，网上的例子大都是.net8.0以前的，可以参考，但照搬是没效果的。

2、一定要区分你使用的是哪种模式，这里我使用的是server模式，不同的模式认证方式也不一样。

3、决定使用哪一种认证，就是在JWT和cookie中进行选择吧，server模式没有前端，建议还是使用cookie认证吧。

4、认证通过后刷新跳转到account/login的问题，虽然你的代码中从来没有写这个，但这是增加了cookie认证后才出现的，需要指定一下cookie的主页路径，设置好后就解决了

//添加Cookies认证中间件
builder.Services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(options=>
{
    options.Cookie.HttpOnly = true;
    options.LoginPath = "/login";
});

5、遇到问题去B站上看视频，找对应你.net版本和模式的听，大概率能解决。

BootStrapBlazor中选择器组件的使用

选择器需要绑定一个List<SelectedItem>，可以从数据库中查询出来，也可以手写一个，查询的方式灵活，手写就相当于是静态了，先定义好选择器需要的

    private List<SelectedItem>? Roles { get; set; }
    private string? RoleName { get; set; } = "";  //其实更应该是角色ID

然后你得有一个实体类，至少包含角色ID和角色名称吧，我这里用的是中文，数据库中同样也需要存在一个这样的表，在OnInitialized事件中从数据库中查需要的数据

using (var context = new MyContext()) 
{
    Roles = context.userRoles.Select(p=>new SelectedItem(p.角色ID.ToString(),p.角色名称)).ToList();
}

这样子数据就获取到了，就可以放到select组件中使用了。

在网页表格外使用

相当于表格外你要实现查询功能的选择之类的，不和表格绑定，需要判断一下RoleName是否为空，不然的话会引发空异常报错的。

<div>
    <div class="col-3 col-sm-3">
        <Select Color="Color.Primary" Items="Roles" @bind-Value="@RoleName"></Select> 
        @{
            if(!string.IsNullOrEmpty(RoleName))
            {
                <div>@Roles?.FirstOrDefault(p => p.Value == RoleName).Text.ToString()</div>
            }
          }
         
    </div>
</div>

要是使用的是选中的值，那么直接用Rolename就可以了，如果想要的是选中的文本，那就要像上面一样查一下了。

在表格列中使用

比如有个表格叫用户表，表格例中，有一列叫角色id，显示出来的是数字，但是你想让它显示成角色表中的角色名称，那就需要在这一列中使用lookup转换一下，绑定的值就是Roles

<TableColumn @bind-Field="@context.角色ID" Text="角色" Width="100" Align="Alignment.Left" Lookup="Roles" >
</TableColumn>

如果你自定义了表格的编辑模版，想在编辑模版中使用的话，则需要进行Item绑定和值绑定，这样子你选择的是角色名称，实际保存时是角色ID

           <div class="col-6 col-sm-6">
               <BootstrapInputGroup>
                   <Button Color="Color.Success" IsDisabled="true" style="width:120px;">角色</Button>
                   <Select Color="Color.Primary" Items="Roles" @bind-Value="@context.角色ID"></Select>
               </BootstrapInputGroup>
           </div>

#挑战30天在头条写日记##职场#