用户在系统登录后,一般会提供一个入口给当前用户更改当前的密码,其实更改密码操作是很简单的一个处理,不过本篇随笔主要是介绍结合前后端来实现这个操作,后端是基于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后端接口的定义如下所示
修改密码成功后提示。
这样就顺利完成简单密码就可以修改的操作的了。
为了方便读者理解,我列出一下前面几篇随笔的连接,供参考:
循序渐进VUE+Element 前端应用开发(1)--- 开发环境的准备工作
循序渐进VUE+Element 前端应用开发(2)--- Vuex中的API、Store和View的使用
循序渐进VUE+Element 前端应用开发(3)--- 动态菜单和路由的关联处理
循序渐进VUE+Element 前端应用开发(4)--- 获取后端数据及产品信息页面的处理
循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
循序渐进VUE+Element 前端应用开发(6)--- 常规Element 界面组件的使用
循序渐进VUE+Element 前端应用开发(7)--- 介绍一些常规的JS处理函数
循序渐进VUE+Element 前端应用开发(8)--- 树列表组件的使用
循序渐进VUE+Element 前端应用开发(9)--- 界面语言国际化的处理
循序渐进VUE+Element 前端应用开发(10)--- 基于vue-echarts处理各种图表展示
循序渐进VUE+Element 前端应用开发(11)--- 图标的维护和使用
循序渐进VUE+Element 前端应用开发(12)--- 整合ABP框架的前端登录处理
循序渐进VUE+Element 前端应用开发(13)--- 前端API接口的封装处理
循序渐进VUE+Element 前端应用开发(14)--- 根据ABP后端接口实现前端界面展示
循序渐进VUE+Element 前端应用开发(15)--- 用户管理模块的处理
循序渐进VUE+Element 前端应用开发(16)--- 组织机构和角色管理模块的处理
循序渐进VUE+Element 前端应用开发(17)--- 菜单管理
循序渐进VUE+Element 前端应用开发(18)--- 功能点管理及权限控制
循序渐进VUE+Element 前端应用开发(19)--- 后端查询接口和Vue前端的整合
使用代码生成工具快速生成基于ABP框架的Vue+Element的前端界面
循序渐进VUE+Element 前端应用开发(20)--- 使用组件封装简化界面代码
循序渐进VUE+Element 前端应用开发(21)--- 省市区县联动处理的组件使用
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(23)--- 基于ABP实现前后端的附件上传,图片或者附件展示管理
循序渐进VUE+Element 前端应用开发(24)--- 修改密码的前端界面和ABP后端设置处理
循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)
循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
循序渐进VUE+Element 前端应用开发(27)--- 数据表的动态表单设计和数据存储
循序渐进VUE+Element 前端应用开发(28)--- 附件内容的管理
循序渐进VUE+Element 前端应用开发(29)--- 高级查询条件的界面设计
部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用
循序渐进VUE+Element 前端应用开发(30)--- ABP后端和Vue+Element前端结合的分页排序处理
循序渐进VUE+Element 前端应用开发(31)--- 系统的日志管理,包括登录日志、接口访问日志、实体变化历史日志
循序渐进VUE+Element 前端应用开发(32)--- 手机短信动态码登陆处理
循序渐进VUE+Element 前端应用开发(33)--- 邮件参数配置和模板邮件发送处理
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
使用Vue-TreeSelect组件的时候,用watch变量方式解决弹出编辑对话框界面无法触发更新的问题
专注于代码生成工具、.Net/.NetCore 框架架构及软件开发,以及各种Vue.js的前端技术应用。著有Winform开发框架/混合式开发框架、微信开发框架、Bootstrap开发框架、ABP开发框架、SqlSugar开发框架等框架产品。
转载请注明出处:撰写人:伍华聪 http://www.iqidi.com