按部就班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後端接口的定義以下所示

 

 修改密碼成功後提示。

 這樣就順利完成簡單密碼就能夠修改的操做的了。