从零开始BlazorServer(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