使用者在系統登入後，一般會提供一個入口給當前使用者更改當前的密碼，其實更改密碼操作是很簡單的一個處理，不過本篇隨筆主要是介紹結合前後端來實現這個操作，後端是基於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後端介面的定義如下所示

 修改密碼成功後提示。

 這樣就順利完成簡單密碼就可以修改的操作的了。