转载 原文作者:伍华聪 原文地址:https://www.cnblogs.com/wuhuacong/p/13885912.html
用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于ABP框架的,需要对密码的安全性进行一个设置,否则严格的密码规则非常不友好,毕竟我们系统很多情况下不需要那么复杂的密码规则。
1、ABP后端的密码设置和修改密码处理
//密码验证规则
services.Configure<IdentityOptions>(options =>
{
options.Password.RequireDigit = false;
options.Password.RequireLowercase = false;
options.Password.RequireNonAlphanumeric = false;
options.Password.RequireUppercase = false;
options.Password.RequiredLength = 6;
});
如果没有设置上面的操作,那么简单的密码修改,是无法通过ABP框架默认密码规则的检验的 。
如果嫌弃这样的密码规则太麻烦,那么设置了允许简单密码处理,那么一般符合6位密码都可以顺利通过了。
2、前端界面的处理和组件化操作
在管理系统中,一般在用户头像附近增加一些常用菜单,其中就包括修改密码的操作入口。
而往往我们还有其他地方,可能也需要增加对应的修改密码入口,如在用户管理的界面下。
也就是说,修改密码对话框符合组件重用的规则,在多处都可能使用到的。
那么,我们就需要把常用的界面封装层一个界面组件的方式,方便重用。
修改密码窗体作为一个组件进行开发,它的界面模板代码如下所示。
<template>
<el-dialog :title="$t('changepass.title')" :visible="isVisible" :modal-append-to-body="false" @close="close">
<el-form ref="form" :model="user" :rules="rules" label-width="160px">
<el-form-item :label="$t('changepass.oldpassword')" prop="oldPassword">
<el-input v-model="user.oldPassword" :placeholder="$t('changepass.oldpassword_tip')" type="password" />
</el-form-item>
<el-form-item :label="$t('changepass.newpassword')" prop="newPassword">
<el-input v-model="user.newPassword" :placeholder="$t('changepass.newpassword_tip')" type="password" />
</el-form-item>
<el-form-item :label="$t('changepass.confirmpassword')" prop="confirmPassword">
<el-input v-model="user.confirmPassword" :placeholder="$t('changepass.confirmpassword_tip')" type="password" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitChange">{{ $t('form.save') }}</el-button>
<el-button type="danger" @click="close">{{ $t('form.close') }}</el-button>
</el-form-item>
</el-form>
</el-dialog>
</template>
这里面使用到了多语言的设置,以便从对应的语言文件中读取对应的键值内容。
例如中文的zh.js里面部分内容如下所示。
切换到英文的话,自动通过多语言的函数,获取对应英文en.js的文件中的配置值。
其中修改密码的操作,是通过Api发起后端的数据处理,操作函数如下所示。
submitChange() {
var param = {
userId: getUserId(),
newPassword: this.user.newPassword,
currentPassword: this.user.oldPassword
}
// console.log(param)
this.$refs['form'].validate(valid => {
if (valid) {
user.ChangePassword(param).then(data => {
if (data.result) {
this.msgSuccess('修改成功')
this.$emit('update:visible', false) // 更新
} else {
this.msgError('密码修改失败')
}
})
}
})
},
前端Api类的接口函数定义如下所示。
ABP后端接口的定义如下所示:
修改密码成功后提示。
这样就顺利完成简单密码就可以修改的操作的了。