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

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

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

        
            
                
                
            
        

然后我们需要创建一个ChangePasswordVO

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

文章来源于互联网:从零开始Blazor Server(14)--修改密码

THE END
分享
二维码