目前，我们只做了在用户管理里强行修改密码，而没有做用户自行修改密码的功能，今天我们来实现它。
首先，我们的用户密码修改最好的位置应该就是在头像下面的下拉菜单里，所以我们在那里的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
发表评论