从零开始Blazor Server(14)–修改密码

目前，我们只做了在用户管理里强行修改密码，而没有做用户自行修改密码的功能，今天我们来实现它。

首先，我们的用户密码修改最好的位置应该就是在头像下面的下拉菜单里，所以我们在那里的LinkTemplate增加一个LinkButton。

        <Logout ImageUrl="images/argo-c.png" DisplayName="@_user.Name" UserName="@_user.UserName">             <LinkTemplate>                 <LinkButton Icon="fa fa-gear" Text="修改密码" Color="Color.None" OnClick="ChangePassword"></LinkButton>                 <LogoutLink Url="/api/account/logout"></LogoutLink>             </LinkTemplate>         </Logout>

然后我们需要创建一个ChangePassword的VO。

public class ChangePassword {     [Display(Name = "原密码")]     [Required(ErrorMessage = "原密码不能为空")]     [AutoGenerateColumn(ComponentType = typeof(BootstrapPassword))]     public string? OldPassword { get; set; }      [Display(Name = "新密码")]     [Required(ErrorMessage = "新密码不能为空")]     [AutoGenerateColumn(ComponentType = typeof(BootstrapPassword))]     public string? NewPassword { get; set; }          [Display(Name = "重复新密码")]     [Compare(nameof(NewPassword), ErrorMessage = "两次密码不一致")]     [AutoGenerateColumn(ComponentType = typeof(BootstrapPassword))]     public string? RePassword { get; set; } }

这里面我们让旧密码不能为空，新密码不能为空，然后确认密码要与新密码内容一致。

这里我们还可以加比如位数的验证之类的，甚至可以自己写校验规则。我这里就不写了。

然后我们使用[AutoGenerateColumn(ComponentType = typeof(BootstrapPassword))]指定我们的输入框是BootstrapPassword，以密码方式显示，不然默认显示为Input它不好看。

最后就是我们使用EditDialog把内容显示出来。

    private void ChangePassword()     {         var option = new EditDialogOption<ChangePassword>()         {             Title = "修改密码",             Size = Size.Medium,             Model = new ChangePassword(),             ItemsPerRow = 1,             RowType = RowType.Normal,             OnEditAsync = async context =>             {                 if (context.Model is not ChangePassword changePassword)                 {                     await ToastService.Show(new ToastOption()                     {                         Category = ToastCategory.Error,                         Title = "保存出错",                         Content = "类型转换错误"                     });                     return false;                 }                 var oldPassword = changePassword.OldPassword.ToMD5Encrypt();                 if (!await UserEntity.Select.Where(x => x.Id == _user.Id && x.Password == oldPassword).AnyAsync())                 {                     await ToastService.Show(new ToastOption()                     {                         Category = ToastCategory.Error,                         Title = "保存出错",                         Content = "原密码不正确，请检查原密码"                     });                     return false;                 }                 var newPassword = changePassword.NewPassword.ToMD5Encrypt();                 _user.Password = newPassword;                 await _user.SaveAsync();                 return true;             }         };         DialogService.ShowEditDialog(option);     }

这里我们解释一下，OnEditAsync就是我们点击保存按钮以后的回调，返回true则会关闭弹窗，false不会。

所以我们就判断一下当前用户密码是否正确，如果不正确则报错。

否则我们保存新密码。

这样，我们的修改密码功能就完成了。

代码在代码在https://github.com/j4587698/BlazorLearn，分支lesson14