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