按部就班VUE+Element 前端应用开发(24）--- 修改密码的前端界面和ABP后端设置处理

用户在系统登陆后，通常会提供一个入口给当前用户更改当前的密码，其实更改密码操做是很简单的一个处理，不过本篇随笔主要是介绍结合先后端来实现这个操做，后端是基于ABP框架的，须要对密码的安全性进行一个设置，不然严格的密码规则很是不友好，毕竟咱们系统不少状况下不须要那么复杂的密码规则。

一、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位密码均可以顺利经过了。

 

 

二、前端界面的处理和组件化操做

 在管理系统中，通常在用户头像附近增长一些经常使用菜单，其中就包括修改密码的操做入口。

而每每咱们还有其余地方，可能也须要增长对应的修改密码入口，如在用户管理的界面下。 

也就是说，修改密码对话框符合组件重用的规则，在多处均可能使用到的。

那么，咱们就须要把经常使用的界面封装层一个界面组件的方式，方便重用。

修改密码窗体做为一个组件进行开发，它的界面模板代码以下所示。

<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后端接口的定义以下所示

 

 修改密码成功后提示。

 这样就顺利完成简单密码就能够修改的操做的了。