用戶在系統登錄后，一般會提供一個入口給當前用戶更改當前的密碼，其實更改密碼操作是很簡單的一個處理，不過本篇隨筆主要是介紹結合前后端來實作這個操作，后端是基于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后端介面的定義如下所示
修改密碼成功后提示，
這樣就順利完成簡單密碼就可以修改的操作的了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/194179.html
標籤：JavaScript