循序漸進VUE+Element 前端應用開發(24）- 修改密碼的前端介面和ABP後端設置處理

循序漸進VUE+Element 前端應用開發(24）— 修改密碼的前端介面和ABP後端設置處理

2020 年 10 月 27 日
筆記
循序漸進VUE+Element

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

修改密碼成功後提示。

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

Tags: 循序漸進VUE+Element