循序渐进VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理

用户在系统登录后，一般会提供一个入口给当前用户更改当前的密码，其实更改密码操作是很简单的一个处理，不过本篇随笔主要是介绍结合前后端来实现这个操作，后端是基于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-formref="form":model="user":rules="rules"label-width="160px">
      <el-form-item:label="$t('changepass.oldpassword')"prop="oldPassword">
        <el-inputv-model="user.oldPassword":placeholder="$t('changepass.oldpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item:label="$t('changepass.newpassword')"prop="newPassword">
        <el-inputv-model="user.newPassword":placeholder="$t('changepass.newpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item:label="$t('changepass.confirmpassword')"prop="confirmPassword">
        <el-inputv-model="user.confirmPassword":placeholder="$t('changepass.confirmpassword_tip')"type="password" />
      </el-form-item>
      <el-form-item>
        <el-buttontype="primary"@click="submitChange">{{ $t('form.save') }}</el-button>
        <el-buttontype="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('密码修改失败')

            }

          })

        }

      })

    },